Jump to content

Back to the top button

Recommended Posts

In 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

Hi, I am unable to create a code block in the footer. Is this a feature for premium subscribers to Squarespace? 

Thanks in advance. 

On 1/23/2021 at 2:03 PM, tuanphan said:

In 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>

 

 

 

 

Link to comment
11 hours ago, Trigger said:

Hi, I am unable to create a code block in the footer. Is this a feature for premium subscribers to Squarespace? 

Thanks in advance. 

 

 

 

All plans (include both trial plan, personal plan) support Code Block

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

As @derricksrandomviews and @tuanphan mention code blocks are available on all plans. However putting  a script or iframe tag in will trigger a premium feature warning if you are not on the right plan. Other than that you should be able to use any HTML you want.

902159536_ScreenShot2021-02-13at4_10_00PM.png.6286232bb5fc5f1534a71c28f8be96ad.png

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 1/23/2021 at 9:03 AM, tuanphan said:

In 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>

 

Is there a way to add a background to the button? right now the text overlaps with my site background/text

Link to comment
  • 2 weeks later...
On 2/23/2021 at 10:40 AM, hchiccone said:

Is there a way to add a background to the button? right now the text overlaps with my site background/text

Can you share link to your site? We can help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
Hi all, this is the code that I have in my 7.1 site in the custom CSS for a floating Back to Top button and working well, with thanks to tutorials where I found this (as I am NOT an experienced coder, just copying basic codes like this button🤗 and making minor adjustments at the most).
 
#back-to-top{position:fixed!important; bottom:14px!important; right:12px!important; z-index:1!important;opacity:.4;font-size:22px;color:white!important;padding:8px;}
 
And this is how my code used on the page looks and it's added in a code-block in the footer to make it work on all pages of the website, and I used the unicode character ▲ instead of the word TOP:
<a href="#page" class="sqs-block-button-element--small sqs-block-button-element" id="back-to-top"> ▲ </a>
 
It's all working well, and looking neat, BUT NOW I NEED SOME ADVICE for the next step!
I would like to set the distance to bottom to e.g. 164px (looks better if the button is not getting absorbed into the dark footer), but then I REALLY need to add FIRST that kind of Javascript that makes the button disappear when the page is at its top already. Assuming it is Javascript that does a thing like that?
 
I already got some script kindly donated through this group but it did not work. Possibly because the target (id?) of the standard Javascript was not identical to the button name (address?) that I used in the code block on the page and my attempt to make them identical did not work. I assume adding the script to the page header code injection was the right place for it?
 
My website is www.riverdaleruralholidays.com if anyone cares to take a look. Pic below is how my button looks. Ideally, the button should not go further down on scroll than stopping just above the footer (I know how to adjust that, it looks good if I set bottom:164px in the Custom CSS-code) but then I want the button to disappear when the top of the page is in view and appear only when scrolling down. It now shows about halfway the viewport if the top of the page is already there, so that looks a bit weird, so for now i left it set to the very bottom. So I would need some Javascript (I guess?) that is working from the names and id that my code in the code block already has.
 
 

Capture.JPG

Link to comment
On 3/19/2021 at 12:12 AM, ingrid.villamagdalen said:
Hi all, this is the code that I have in my 7.1 site in the custom CSS for a floating Back to Top button and working well, with thanks to tutorials where I found this (as I am NOT an experienced coder, just copying basic codes like this button🤗 and making minor adjustments at the most).
 
#back-to-top{position:fixed!important; bottom:14px!important; right:12px!important; z-index:1!important;opacity:.4;font-size:22px;color:white!important;padding:8px;}
 
And this is how my code used on the page looks and it's added in a code-block in the footer to make it work on all pages of the website, and I used the unicode character ▲ instead of the word TOP:
<a href="#page" class="sqs-block-button-element--small sqs-block-button-element" id="back-to-top"> ▲ </a>
 
It's all working well, and looking neat, BUT NOW I NEED SOME ADVICE for the next step!
I would like to set the distance to bottom to e.g. 164px (looks better if the button is not getting absorbed into the dark footer), but then I REALLY need to add FIRST that kind of Javascript that makes the button disappear when the page is at its top already. Assuming it is Javascript that does a thing like that?
 
I already got some script kindly donated through this group but it did not work. Possibly because the target (id?) of the standard Javascript was not identical to the button name (address?) that I used in the code block on the page and my attempt to make them identical did not work. I assume adding the script to the page header code injection was the right place for it?
 
My website is www.riverdaleruralholidays.com if anyone cares to take a look. Pic below is how my button looks. Ideally, the button should not go further down on scroll than stopping just above the footer (I know how to adjust that, it looks good if I set bottom:164px in the Custom CSS-code) but then I want the button to disappear when the top of the page is in view and appear only when scrolling down. It now shows about halfway the viewport if the top of the page is already there, so that looks a bit weird, so for now i left it set to the very bottom. So I would need some Javascript (I guess?) that is working from the names and id that my code in the code block already has.
 
 

Capture.JPG

Hi. I send code in another post. You try testing.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
10 hours ago, tuanphan said:

Hi. I send code in another post. You try testing.

That would be great Tuanphan! I can't write that kind of script myself to move a button in and out but will hopefully be able to understand it and know where to put it! 
My Back to Top button now works well and looks good, but would be even better if i can hide it when the top of the page is in view!

Link to comment
  • 9 months later...
On 1/23/2021 at 6:03 AM, tuanphan said:

In 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>

 

Hi @tuanphan,

Finally, one that works on 7.1 without seeing the word TOP above the site.

Is there a way to have it slowly scroll back up vs straight to the top?

Cheers,

Roland

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
  • 4 weeks later...

Hi Roland, just happened to see your question. Eactly what was my question too one year ago! I then found through a Facebook platform someone who wrote the bit of code to make the button disappear when the page top comes into view and appear when the page header is out of view. Plus a bit of script to make the  scroll back action nice and smooth, not with a big jump. It's working well for almost a year now without any problem. Have a look at www.riverdaleruralholidays.com and if you like to the way this button behaves, then I'm happy to copy it from my custom code. One year on, and I will be able to better understand the bits and pieces that form the code and find the relevant bits in the CSS and the code injection.

Kind regards, Ingrid

Link to comment
6 minutes ago, ingrid.villamagdalen said:

Hi Roland, just happened to see your question. Eactly what was my question too one year ago! I then found through a Facebook platform someone who wrote the bit of code to make the button disappear when the page top comes into view and appear when the page header is out of view. Plus a bit of script to make the  scroll back action nice and smooth, not with a big jump. It's working well for almost a year now without any problem. Have a look at www.riverdaleruralholidays.com and if you like to the way this button behaves, then I'm happy to copy it from my custom code. One year on, and I will be able to better understand the bits and pieces that form the code and find the relevant bits in the CSS and the code injection.

Kind regards, Ingrid

Hi Ingrid,

I found a  CSS that works for me. Similar like yours, it shows up after a little bit.

Thanks for following up!

Roland

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment

Dear @tuanphanI would appreciate If you maybe had time to help me out, I have a couple of issues on my site which I cańt solve myself.

 Is there a flawless code for smooth scrolling?…(I have currently one injected in css, it works but the banner pictures on mobile view are now displayed in a shaky way 🙈when scrolling down-I have parallex aktivated, maybe that’s a no go in combination..?  )  Is there something I can change or is it the code? i am using brine 7.0 (walking rovers templet) Maybe you can help me  to make it run smoothly ? 💛

also I would love to have a code for making the back to top arrow disappearing when on top 👀

Maybe you can also help me out with the color of the back to top button? Is there a code snippet for changing it from white to black when scrolling over the white sections on my site?! It would be too good to make that happen 💫
 

And last on the Accordion

What code must I use to change the color of the font (p) which shows inside the Dropdown content box? I would only like to change it from grey to WHITE exactly at that place. 


I would really appreciate your help a great deal!!

My site:

Kind regards, Moa Maria

 

 

 

Edited by Lalokidesign
Link to comment
On 2/18/2022 at 1:45 PM, Lalokidesign said:

Dear @tuanphanI would appreciate If you maybe had time to help me out, I have a couple of issues on my site which I cańt solve myself.

 Is there a flawless code for smooth scrolling?…(I have currently one injected in css, it works but the banner pictures on mobile view are now displayed in a shaky way 🙈when scrolling down-I have parallex aktivated, maybe that’s a no go in combination..?  )  Is there something I can change or is it the code? i am using brine 7.0 (walking rovers templet) Maybe you can help me  to make it run smoothly ? 💛

also I would love to have a code for making the back to top arrow disappearing when on top 👀

Maybe you can also help me out with the color of the back to top button? Is there a code snippet for changing it from white to black when scrolling over the white sections on my site?! It would be too good to make that happen 💫
 

And last on the Accordion

What code must I use to change the color of the font (p) which shows inside the Dropdown content box? I would only like to change it from grey to WHITE exactly at that place. 


I would really appreciate your help a great deal!!

My site:

Kind regards, Moa Maria

 

 

 

What is access password?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 2/17/2022 at 7:51 PM, ingrid.villamagdalen said:

Hi Roland, just happened to see your question. Eactly what was my question too one year ago! I then found through a Facebook platform someone who wrote the bit of code to make the button disappear when the page top comes into view and appear when the page header is out of view. Plus a bit of script to make the  scroll back action nice and smooth, not with a big jump. It's working well for almost a year now without any problem. Have a look at www.riverdaleruralholidays.com and if you like to the way this button behaves, then I'm happy to copy it from my custom code. One year on, and I will be able to better understand the bits and pieces that form the code and find the relevant bits in the CSS and the code injection.

Kind regards, Ingrid

Hi Ingrid, is your code for the scroll button all css and code block?   The code from this thread is not working for me. And I found many other codes but they require code injector that I don't have on my personal plan.  If you don't mind, could you share your code for your scroll button. 

Thanks.

Link to comment
16 hours ago, Greentea99 said:

Hi Ingrid, is your code for the scroll button all css and code block?   The code from this thread is not working for me. And I found many other codes but they require code injector that I don't have on my personal plan.  If you don't mind, could you share your code for your scroll button. 

Thanks.

With Personal Plan

First edit 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>

Next, save & reload the site

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
5 hours ago, tuanphan said:

With Personal Plan

First edit 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>

Next, save & reload the site

Hi this code shows up a mere 1 second while in editing mode but it doesn't show up on the website when I save it. When I go back to edit, it's doesn't appear either, but the code block is still there with the code.

Link to comment

You gotta check out the awesome builder @WillMyers created: https://www.will-myers.com/back-to-top-button

 

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
19 hours ago, Greentea99 said:

Hi this code shows up a mere 1 second while in editing mode but it doesn't show up on the website when I save it. When I go back to edit, it's doesn't appear either, but the code block is still there with the code.

Try open incognito windows & check again

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.