Scroll to Top Button

$0.00

Add a scroll to top button in Squarespace with this component. The custom back to top button only shows up once a user scrolls. Use any images as an accessible custom button.

Support

Our free components are not eligible for installation support. If you need assistance, please consider hiring website design experts from our Standout program or purchase a Setup Support Pass.

Attribution

Our free components and licensed for use in unlimited websites. With every use, please credit us by tagging our account (@squarestylist) on social media or linking back to our site. Visit this page for more info.

Get Free Access

Add a scroll to top button in Squarespace with this component. The custom back to top button only shows up once a user scrolls. Use any images as an accessible custom button.

Support

Our free components are not eligible for installation support. If you need assistance, please consider hiring website design experts from our Standout program or purchase a Setup Support Pass.

Attribution

Our free components and licensed for use in unlimited websites. With every use, please credit us by tagging our account (@squarestylist) on social media or linking back to our site. Visit this page for more info.

Get Free Access

Free components can be used in unlimited number of websites. Please provide proper copyright attribution where possible with every use of our components. Learn More

 
 

Steps to Implement this Component

To change the logo on one page, simply paste the codes to the Page Settings > Header Code Injection

<script>

document.addEventListener('DOMContentLoaded',()=>{const body=document.body,link=document.querySelector('footer a[href="#top"]'),footer=link?.closest('.fe-block');footer?.classList.add('scroll-to-top');const toggle=()=>window.scrollY>200?body.classList.add('is-scrolled'):body.classList.remove('is-scrolled');window.addEventListener('scroll',toggle);toggle()});

</script>

Paste the codes to the Custom CSS 

html{scroll-behavior:smooth}.fe-block.scroll-to-top{opacity:0;transition:.5s}.fe-block.scroll-to-top a{display:none}body.is-scrolled .fe-block.scroll-to-top{opacity:1}body.is-scrolled .fe-block.scroll-to-top a{display:block}body:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-top{position:fixed;grid-area:unset!important;bottom:0;right:0}body:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections{z-index:11}
.fe-block.scroll-to-top {
  right:2vw !important;
  bottom:2vw !important;
  width:100px;
  height:100px;
}

Youtube walkthrough: