How to Add Back to Top Button to Your Website

Adding a Back to Top Button to your website is a simple way to make navigation smoother, especially for longer pages. It gives your visitors a quick way to jump back to the top without scrolling, helping them browse your content more comfortably.

With Jotform’s no-code tool, you can set this up in just a few clicks and customize its style, position, and behavior to match your website.

Creating and Getting Your Back to Top Button Widget Embed Code

To add a back-to-top button to your website, you’ll first need to get the embed code from the Back to Top Button widget. Here’s a quick how-to:

1. Go to the Back to Top Button widget page, and in the Edit Widget section on the left, set up these things:
   • Button Position  — Choose where the button appears on the screen, such as the bottom-left or bottom-right corner, so it stays easy to spot without getting in the way of your content.
   • Show Label  — Turn this on to display a short text label like Back to Top alongside the icon, helping users better understand what the button does.
   • Show After Scrolling  — Control when the button becomes visible based on how far a visitor has scrolled down the page, so it only appears when it’s actually useful.
   • Scroll Animation  — Set how the page scrolls back to the top when the button is clicked, such as a smooth glide or a quicker jump, for a more polished browsing experience.
2. Then, click on Continue.

If you’ve previously created a Yelp Review widget, you’ll see the screen below when you open the widget page. To set up a new one, just click on the Create New Widget button to access the configuration screen and start customizing it.

3. Next, under the Style section, customize these things:
   • Button Size — Adjust the overall size of the button to make it more subtle or more noticeable, depending on your design.
   • Icon Size — Change the size of the icon inside the button without affecting the button itself.
   • Icon — Pick the icon that appears inside the button, usually an arrow or similar symbol that represents going upward.
   • Corner Radius — Control how rounded the button’s corners are, from sharp edges to fully rounded for a softer look.

4. Then, scroll down to the bottom and continue to configure this thing:
   • Button Colors — Customize the main color of the button to match your website’s theme or branding.
     • Background Color — Set the background color of the button, especially useful if the design includes layered or transparent elements.
     • Text Color — Choose the color of the label text when the label is enabled, making sure it stays readable.
   • Drop Shadow — Add a shadow effect behind the button to give it depth and make it stand out from the page.
5. After that, click on Continue.

6. Now, in the Display Rules section, configure these settings:
   • Distance from Bottom — Set how far the button sits from the bottom edge of the screen for better spacing and visibility.
   • Distance from Side — Adjust how far the button is placed from the left or right edge, depending on its position.
   • Show on Desktop — Enable or disable the button for desktop users, giving you control over how it appears on larger screens.
   • Show on Mobile — Enable or disable the button for mobile users, so you can tailor the experience for smaller screens.
7. Once everything’s set, click on Try it on your Website for Free.

8. Finally, in the Embed window that opens, click on Copy Code, and you’re done.

That’s it. Your Back to Top Button widget is all set up. Simply copy and paste the embed code into your website, and the button will appear automatically, making it easier for visitors to jump back to the top of your page. Take a look at the screenshot below to see how it looks on a sample website.