Jump to content

Add Scroll To Top button that appears midway through page WITHOUT access to code injection

Recommended Posts

Posted

I have found many useful things here and elsewhere about adding a "Scroll To Top" button in the corner of my page; I would love to be able to make it appear once you have gone down some in the page, not at the beginning. However, everything seems to require access to the Code Injection feature, which is frustratingly only an option for the Business or Commerce level sites, not regular Premium/Personal. Does anyone know a way to do so without the Code Injection process? Thanks.

  • Replies 7
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

With regular Personal Plan

Edit Your site Footer >> Add a Code Block > Paste this code

<a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
  /* Back to Top */
.t-top {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
}
.t-top .arrow:before {
      font-family: 'squarespace-ui-font';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\e02d";
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
}
.t-top .arrow {display:inline;}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 months later...
Posted

Site URL: https://accordion-jaguar-tztz.squarespace.com/config/

Hi, how do I add a button at the top of the footer that allows the page to scroll to top of page?

Option 1: I have a friend who also built a Squarespace site, and I'd like to do the same as his, so it sits on the line:

image.thumb.png.bd03741d35ceeb8d43d23dfcf6dec757.png

Option 2: Either this or a floating arrow that fades in appearing on the right hand side as you reach the end of the page; this guy has a tutorial showing you how to do it (https://www.will-myers.com/articles/building-a-back-to-top-button-in-squarespace), but I don't have Premium, so I don't have the Advanced code injection available - is there anyway to add that type of thing on Design > Custom CSS?

Many thanks for your help!

Tomm

Posted

@tuanphan  Thanks for sharing this code. Is there any way to apply this code only on particular pages (ie pages that are longer, in my case the PROJECTS pages (TV DRAMA / FEATURE FILM / SHORTS / TRAILERS only)? 

I tried adding a code block to the end of my TV DRAMA page, but it didn't recognise the code.

I also asked about this here; 

site: https://accordion-jaguar-tztz.squarespace.com/config/

pass: ost

Many thanks!

Tomm

Posted
1 hour ago, tommmmusic said:

@tuanphan  Thanks for sharing this code. Is there any way to apply this code only on particular pages (ie pages that are longer, in my case the PROJECTS pages (TV DRAMA / FEATURE FILM / SHORTS / TRAILERS only)? 

I tried adding a code block to the end of my TV DRAMA page, but it didn't recognise the code.

I also asked about this here; 

site: https://accordion-jaguar-tztz.squarespace.com/config/

pass: ost

Many thanks!

Tomm

You can add to Site Footer, then edit page (page where you want to button not appear) > Add a Code Block > Paste this code

<style>
  a.t-top {
  	display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
6 minutes ago, tuanphan said:

You can add to Site Footer, then edit page (page where you want to button not appear) > Add a Code Block > Paste this code

<style>
  a.t-top {
  	display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>

 

Thank you @tuanphan! Is there any way to make the button only appear as you scroll down the page / disappear as you scroll back up?

Posted

Hey @tuanphanthe only problem is that by creating a code block in the footer, it messes up the spacing and symmetry I had between the logo and the text, in the mobile version:

image.thumb.png.105b28803bc9bcb2e935e78c97266e5c.pngAlso, same problem; where can I put this code to make the "TOP" button disappear, without more blank space being created in the footer:

<style>
  a.t-top {
  	display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>

NB: I only have a personal account, not business so I can't inject code...

Thanks again,

Tomm

Posted
On 5/25/2022 at 8:38 AM, tommmmusic said:

Thank you @tuanphan! Is there any way to make the button only appear as you scroll down the page / disappear as you scroll back up?

Not possible. This require Script code. Personal Plan doesn't support script code.

On 5/25/2022 at 9:32 AM, tommmmusic said:

Hey @tuanphanthe only problem is that by creating a code block in the footer, it messes up the spacing and symmetry I had between the logo and the text, in the mobile version:

image.thumb.png.105b28803bc9bcb2e935e78c97266e5c.pngAlso, same problem; where can I put this code to make the "TOP" button disappear, without more blank space being created in the footer:

<style>
  a.t-top {
  	display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
</style>

NB: I only have a personal account, not business so I can't inject code...

Thanks again,

Tomm

All Plans support Code Block. Include trial plan + personal plan.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.