Jump to content

Help needed to add back to top button on all pages

Recommended Posts

Site url: www.twigsbranchphotography.com 

I currently have a 'back to top' button showing on my home page on the footer that I think was inherent with the site template (as in I don't recall adding any code for it). It only shows on the homepage and I'd like to add it to all pages - is this possible?

Added a screenshot to show what I mean.

I am on the Mint template/Marquee family 7.0.

Many thanks! 

back to top example.png

Link to comment
  • Replies 5
  • Views 551
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

This is a simple scrolling back to the top button. It doesn't require a business plan to work. Put this code in a markdown block in the footer of your site, it will work for all pages.

<p><a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
  /* Back to Top */  
.t-top {
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 15px;
    text-transform: lowercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 25px;
    bottom: 60px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
  filter: drop-shadow(8px 8px 8px #666666)
}
.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;
  filter: drop-shadow(8px 8px 8px #666666)
}
.t-top .arrow {display:inline;}
</style></p>

Link to comment
Posted (edited)
1 hour ago, derricksrandomviews said:

This is a simple scrolling back to the top button. It doesn't require a business plan to work. Put this code in a markdown block in the footer of your site, it will work for all pages.

<p><a href="#top" class="t-top"><span class="arrow"></span>Top</a>
<style>
  /* Back to Top */  
.t-top {
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 15px;
    text-transform: lowercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 4px;
    position: fixed;
    right: 25px;
    bottom: 60px;
    width: 40px;
    height: 40px;
    z-index: 999;
    background-color: transparent;
    color: #000;
  filter: drop-shadow(8px 8px 8px #666666)
}
.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;
  filter: drop-shadow(8px 8px 8px #666666)
}
.t-top .arrow {display:inline;}
</style></p>

Thank you @derricksrandomviews - sadly this didn't work for me 😞

Edited by twigsplace
Tag
Link to comment

It is a bit finicky if you view it as the owner, not as a visitor.

Here is one from Inside the Square that may work a bit better. Place this snippet in a markdown block on any page you want the button but not in the footer. You can change the size to small, medium, or large.

<a href="#page" class="sqs-block-button-element--large sqs-block-button-element" id="back-to-top">Back To Top</a>

Add this to custom CSS you can change the position and the opacity to fit your style; 

#back-to-top{ position: fixed!important; bottom: 0!important; right: 0!important; z-index:1!important; opacity: .5 }

Edited by derricksrandomviews
Link to comment
On 3/21/2024 at 7:21 PM, derricksrandomviews said:

It is a bit finicky if you view it as the owner, not as a visitor.

Here is one from Inside the Square that may work a bit better. Place this snippet in a markdown block on any page you want the button but not in the footer. You can change the size to small, medium, or large.

<a href="#page" class="sqs-block-button-element--large sqs-block-button-element" id="back-to-top">Back To Top</a>

Add this to custom CSS you can change the position and the opacity to fit your style; 

#back-to-top{ position: fixed!important; bottom: 0!important; right: 0!important; z-index:1!important; opacity: .5 }

Hi @derricksrandomviews thank you, this does work but is text only, I was hoping to add the same design button that's on the homepage to all pages, rather than just have the words 'back to top' - like this screenshot?

back to top example.png

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.