JS Scroll to Top Button Generator

Icon

Icon color

Background color

Shadow

Roundness

Size

Distance to right

Distance to bottom

Generate a custom JavaScript Back to Top button for your site

A free tool for generating a Scroll to Top button with your preferred icon, color, size, and other properties

Customize the button

Choose the icon, color, size, positioning, and other parameters for the button

Get the JavaScript code

Hit the "Get the code" button to copy the code to your clipboard

Add on your site

Add the button code to your website

FAQ

Can I add the Scroll to Top button to my WordPress site?

Yes, follow the instructions below.

Can I add the Back to Top button to my Wix site?

If you need a Back to Top button on Wix, you can add it the same way as on other sites. Check out the steps below to see how it's done.

Can I add the Back to Top button to my Shopify store?

Yes. Below we have a step-by-step guide that will work for adding a Back to Top button script to Shopify as well.

Can I add the Back to Top button to my Squarespace site?

Adding a Scroll to Top button JavaScript code to Squarespace is just as easy as for any other site. Just follow our standard instructions in the section below.

This website is built on Softr

Join 500,000+ companies and creators already using Softr.

Want to create yours?

About JavaScript Scroll to Top button generator

You’ve probably seen Back to Top buttons on many sites that allow you to quickly get to the top of the page once you start scrolling down. It’s a small but useful navigation element that improves the user experience on the site. With our JS Scroll to Top button generator, you can easily add one on your site on the pages you need.

The tool provides a wide range of customization options to adjust the button according to your site's look and feel. As soon as you get the design right, you just need to hit the "Get the code" and paste the JavaScript code into your site. So, let's take a closer look at the process of configuring and applying the button.

Step 1: Customize the button

So, how to create a Back to Top button? First, let's go through the options you can configure to customize the design and positioning of the button:

Icon. Here, we've provided you with the most common icon choices for Scroll to Top buttons.
Icon color. After selecting the icon, you can also change its color.
Background color. And of course the button's background color can be changed as well.
Shadow. An option to add a drop shadow to the button if needed.
Roundness. Set the button roundness level (from square to circle).
Distance to right. The distance from the right edge of the screen.
Distance to bottom. The distance from the bottom edge of the screen.

As soon as you achieve the desired layout, you are ready to generate the code.

Step 2: Get the code

Just hit the "Get the code" button to copy the JavaScript code to your clipboard.

Step 3: Apply the code on your site

To add the code on your site, you simply need to paste it into the Header (before the </head> tag) or Footer (before the </body> tag) of your page. Below, you can see how the button is added on a Softr site through the Code Inside Page Header section in page settings. This is just an example, and the generated code can be added to virtually any site.