Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Back to the top button


Trigger

Question

  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular 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-wei

You can simply use this website to genarator your squarespace "Back to Top" button.. https://www.scrolltotop.com/

Site URL: https://www.triggersanj.com Hi all, does anyone know how to add custom css code to create a back to the top button at the bottom of my website? Thanks in advance 

Posted Images

13 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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 post
  • 0

Code blocks are standard actually, with all plans.  A Brine family template should allow you to add one in the footer. This simple code snippet pasted in the code block set for html will work, past it in place of  "hello world" 

<a href="#" class="btt"> Back to Top </a>

Edited by derricksrandomviews
Link to post
  • 0
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

Link to post
  • 0

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 post
  • 0
  • 0
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 post
  • 0
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

Link to post
  • 0
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 post
  • 0
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.

Link to post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...