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

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.

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>

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:

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

@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

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>

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?

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:

Also, 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

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:

Also, 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.