Website Design, Squarespace Development and Shopify Commerce

Back to Top Button for Squarespace

Make long pages visitor friendly. Add a professional look.


Why do I need the Back-to-Top Plugin?

Our Back-to-Top button is a lightweight yet dynamic plugin for Squarespace. It adds a floating button that elegantly fades into view when visitors scroll down the page, and then fades away gracefully when they scroll up. When visitors click or tap the button, the page quickly scrolls to the top.

easy installation

Easy Installation

The button is quick and easy to install, with full installation instructions included.

multi language text

Full language support

Edit the text to make it visitor-friendly in any language of your choice.

colours can be changed

Match your brand

Change the colours of the background and text to match your site’s brand image.

Compatible with all templates

Popular template support

Works with Squarespace templates in the Brine and Bedford families.

Flexible Position

Flexible positioning

Choose the button position and define the scroll time before the button appears.

animated features

Animated features

Fades in and out and when clicked, the page scrolls smoothly to the top


Make long pages more friendly. Scroll gracefully to the top.

Buy Now

Frequently Asked Questions

How do I install the plugin?

Full instructions are provided when you purchase this plugin. Installation is as simple as copying and pasting the code into your website’s code areas. If you are unsure, you can book a developer to install it for you.

When will I receive the plugin?

A link to the code is automatically emailed to you within minutes. The link expires after 24 hours, so it’s a good idea to download the document immediately, even if you plan to install the plugin later.

Is my Squarespace template supported?

We’ve tested the plugin on the Bedford family of templates and the Brine family of templates.

Is my Squarespace Plan supported?

The plugin can be installed on sites that are on the Business, Commerce Basic and Commerce Advanced plans, as well as some legacy plans. The plugin is unsuitable for the Personal plan because this does not support JavaScript. If you are unsure which plan you are on, check the Billing section of your website. To do this, click Settings, click Billing & Account, and then click Billing.

How does it work?

When someone scrolls down a long page of your website, the button will fade in slowly. It is usually positioned in the lower right corner, but you can place it anywhere. When a visitor clicks the button, they will glide to back to the top of the page. When the top of the page has been reached, the button will fade away.

Is it Ajax compatible?

Yes! Our plugins are fully compatible with Squarespace’s newer features that use Ajax so there’s no need to disable Ajax. This means you can continue to enjoy all the benefits of the newer Squarespace templates.

Can I try the plugin?

Yes. It’s installed on this website right now - take a look in the lower right corner.

Can I choose a different language?

Yes. You can customise the text or remove it completely.

How can I customise the colours?

You can customise the button’s colours by replacing the default hexadecimal colour codes, with your own. When supplied, the button has white text on a blue background. You can replace these with anything you like, as long as you know the hexadecimal colour codes of the colours you want to use. If you don’t know what the colour codes are, use this colour picker to select your colours, then paste the values into the CSS. Here’s an extract of the CSS:

/* Style the back-to-top floating button */
.sf-back-to-top {
    background-color: #50A1CB; /* button color */
    color: white; /* text/arrow color */ 
    display: none;

As an example, if you wanted the button to have a magenta background, you’d replace #50A1CB with #B04585 where it says background-color. The text can be changed by changing the value of color on the next line.

How can I reposition the button on mobile?

If your website has a mobile footer, you may want to place the button in a slightly different position on mobile. This will prevent the footer and the button from overlapping. For example, to place the button at a height of 90-pixels on mobile (instead of the default of 20-pixels) you can do this by adding the following to Design > Custom CSS below the code you have already added:

@media screen and (max-width: 640px) {
  .sf-back-to-top {
    bottom: 90px;

You can adjust the position by varying the value ‘90px’.