Back to Top Button Generator

Icon
Icon color
Background color
Shadow
Roundness
Size
Distance to right
Distance to bottom

Generate a custom 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 button 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

Yes, follow the instructions below.

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.

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

Adding a Back to Top button 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 20,000+ companies and creators already using Softr.

About Back 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 Back 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 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

customizing the back to top 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:

  1. Icon. Here, we've provided you with the most common icon choices for Scroll to Top buttons.
  2. Icon color. After selecting the icon, you can also change its color.
  3. Background color. And of course the button's background color can be changed as well.
  4. Shadow. An option to add a drop shadow to the button if needed.
  5. Roundness. Set the button roundness level (from square to circle).
  6. Distance to right. The distance from the right edge of the screen.
  7. 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 Back to Top button 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.

customizing the back to top button

Other Free Tools By Softr

YouTube Thumbnail Generator

A free tool for instantly grabbing and downloading any YouTube thumbnail

SVG Shape Generator

A free design tool to create colorful, random, unique, and organic-looking SVG shapes.

SVG Wave Generator

A free design tool to create colorful, multilayer, random, unique, and organic-looking SVG waves.