One of the biggest challenges when creating long-form content on a website is that it takes up vertical space on the web page, which can cause users to have UX (User Experience) concerns.
The last thing content creators or website owners want is a higher bounce rate on a web page that took a greater effort to produce.
You can overcome this issue by adding a simple sticky Back to Top widget on the website.
A floating back to the top button consists of a link that directs the user’s browser (or web view) to the top section of the current page.
Also, there are Back to Element buttons that let you direct users to a specific page section when they are clicked. Those website scrolling widgets help send users back to the table of contents, contact form, email signup form, or pricing table sections to improve engagement and conversion rates.
You will find the top 5 Back to Top buttons or Go to Top link widget creators in today’s article.
Best Back to Top widgets for websites
Elfsight’s Back to Top Buttons

Elfsight is a popular service that provides 90+ high-quality HTML widgets for websites. Its widget categories range from social media feeds to data collectors and chat tools. Some of its popular apps are the LinkedIn Feed Widget, Customer Testimonials Slider, All-in-One Reviews Widget, and Client Logo Carousel.
Elfsight’s Back-to-top buttons widget creator comprises 10+ premade templates and customization options. And the widget can be embedded on any website that supports HTML code insertion.
Features
- Templates: Select one of 10 modern Back to Top widget templates, edit them, and install them on your site. No need to start from scratch and style. Some widgets consist only of the icon (top arrow), while others include both text (e.g., to top, scroll to top) and icon. You can hide/show icons or text on settings.
- Embedded or floating back to top widgets: Choose whether you want the widget to be embedded in a specific place on a web page or make it float (scrolls with the user).
- Choose widget position: Left top, right top, left center, right center, left bottom, right bottom, top center, and bottom center are available widget positions. They are accommodating when you have HTML widgets, such as chat widgets and accessibility tools installed.
- Display options: Elfsight allows you to specify when and where to show the widget. Scroll Position to Display option to define from what point the scroll to top widget should appear. The scroll position is given in percentages. Also, you can select the pages and devices to display the widget.
- Customization options: You can change icons, text, colors, size, shape, layout, and more. The visual editor shows all your edits, and you can preview the mobile responsiveness directly from the editor before adding a back-to-top button to your site.
- Setting widget offset, scrolling speed, custom CSS & JS, widget management, and more.
Back to Top button examples
Here are some available widget examples.
How to create a Back to the Top widget using Elfsight
Use the free Back to Top widget builder below. Select a template, click the “Continue with this template” button, customize the widget, and click the “Add to website for free” button to get the embed code.
Or sign up on the official website and start designing from your dashboard.
Here’s a video tutorial on how to make a back-to-the-top widget on Elfsight.
Back to top HTML code
When you are finished creating your widget, you will receive a snippet similar to the one below.
Place it just above the closing body tag (ex: </body>
) on your site. Most page builders such as Squarespace, Shopify, WordPress, and Blogger allow adding footer scripts affecting the site-wide.
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div class="elfsight-app-d8974001-a489-46ce-8ffa-4ea79c03fafc" data-elfsight-app-lazy></div>
If your website already has other Elfsight widgets, such as the background audio player, installed, you do not need to add the JavaScript part (bolded above) again.
Pricing
Elfsight’s Back-to-top widget is free to use. However, the free plan does not allow you to remove Elfsight branding from widgets. Its paid plans start from $5 per month.
Also, Elfsight provides “All Apps” packages that include access to 80+ widgets. Elfsight monthly prices begin at $15 and are best suited for using multiple apps on your site. Learn more.
Click here to try Elfsight’s Back To Top widget.
Common Ninja’s Back To Top Button Widget
Common Ninja is another website widgets provider with over 200 plugins for websites. Some are Quiz Maker, Timeline, Brackets, Image Slider, Poll, Graphics & Charts, PDF Flipbook, Image Hotspots, and Age Verification widgets.
Its Back to Top Button widget generator consists of a visual editor (from which you can see live changes), multiple back-to-top button skins, and customization features.
Features
- Layouts and skins: To quickly create a Back to Top widget, choose one of three available layouts and select a preferred skin.
- Customization: Common Ninja also allows you to edit the widget. You can use different colors, fonts, sizes, and other settings to change its appearance to match your website theme.
- Button settings: Change button text (i.e., Back to Top), icon, and the button’s placement on your site.
- Display rules: This section includes two parts: 1) When rules and 2) Where rules. These rules enable you to control when and where to display your widget.
- You can use custom CSS, upload images, create a custom design, preview the widget on a mobile device, share a direct link to the widget with others, and more.
Here’s a video tutorial on how to use CommonNinja to craft a Go to Top button widget.
Pricing
You can start using Common Ninja to create a back-top-button widget for your website for free. However, the free plan is limited to a project, one widget, and up to 300 monthly pageviews. You have to upgrade to a paid plan for unlimited page views and widgets and remove Common Ninja’s branding from widgets. Prices are shown below in the screenshot.
Click here to try Common Ninja.
Fouita Back to Top Widget
Fouita’s Back To Top Button generator is another tool for creating a widget that facilitates users’ reaching the top of the page. Compared to other solutions, it has a substantially large collection of icons and targeting options, including widget scheduling, which you can use to turn on or off the widget’s visibility.
Features
- Templates: These are pre-made designs, and currently, six options exist.
- Customization: The editor offers options to change the icon, label, font-weight, colors, background, opacity, style, display position, and scroll speed.
- Triggers, display conditions, and scheduling: This section allows you to specify when and where the widget should be shown.
- Embed on any platform: Fouita’s widgets can be installed on any platform using the HTML code.
Pricing
Fouita’s Back to Top widget is free to use, but it has a monthly pageview limit of 1,000. To get more views, you must upgrade to a subscription plan.
Powr Scroll to Top Plugin
Powr is another site like Elfsight (which we compared in our Elfsight vs. Powr review). It offers over 60 customizable plugins for websites, including widgets for displaying content, collecting information, and providing website utilities.
Powr’s Scroll to Top plugin has an intuitive visual editor and advanced customization options.
Features
- Page navigation controls: Set your scroll-to-top button to navigate to the bottom of the page or back to the top.
- Scroll to a specific section: This feature makes Powr the best Back to Top widget provider for professionals. Now, you can specify the widget to scroll to a particular text or anchor on a web page. For example, you can make the widget scroll to the tables of content of blog posts to improve user experience.
- Control scrolling speed: Slow, medium, and fast are three options.
- Set widget location: Display the widget on the screen’s left, right, top, or bottom side and set the precise location.
- Customize appearance: Design options include Changing icons, colors, and font families, adding a custom image, setting widget hover effects, and more.
- Preview mobile view, custom CSS to edit the widget furthermore, add collaborators, duplicate widgets, and more features.
Pricing
The free plan of Powr lets you create Scroll to Top and Scroll to Bottom widgets. However, advanced controls such as scrolling to a particular anchor link or text and advanced customizations aren’t available on the free plan.
Paid plans start at $5.49 per month, and the Business plan that costs $89.99 per month provides Business plan access to all 60+ apps, such as Form Builder and Popup widget editor.
Click here to try Powr’s Scroll to Top widget.
HTML Back to Top widgets
If you do not want to use third-party applications on your site, add a Back to Top button without third-party scripts.
Since Back to Top buttons are simple widgets, you can get someone to code them for you (or you can fine-tune an existing widget) or get HTML code for the Back to Top button on places like CodePen or JSFiddle.
Here are some floating Back to Top widgets with codes.
Floating Back to Top Button with Smooth Scroll using CSS & JQuey
See the Pen Floating Back to Top Button with Smooth Scroll using CSS & JQuey by Rohan Hapani (@desirecode) on CodePen.
Back to the top with a progress indicator
See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.
Back-to-top button
Final Words on Best Scroll to Top Buttons for Websites
Using a quality scrolling widget on your site gives you many benefits:
- Increase user experience on a site by allowing users to scroll back to the top.
- Improve average reading time by allowing readers to go back to the table of contents.
- Increase conversion rate by getting more people to scroll to a specific element of a page.
However, you must consider many things before adding a scroll widget to your site. Here are some questions you should ask.
- Where will it be placed? Do you want the widget to float or make it sticky on the header?
- Will embedding a Back to Top button on the site impact user experience negatively? Will adding another widget impact your site if you have installed widgets such as an opt-in email button and chat widgets?
- How big (or small) should it be? – Should you add an arrow icon or use only an icon in the widget?
- Should it have smooth scrolling or a straightforward jump to the top HTML button? Smooth scroll-to-top buttons use JavaScript, which might impact the loading time, while HTML back-to-top widgets use anchor links to jump to the top.
Another question you should ask is, “Is it actually needed to have one?.” Today, users are conditioned to scroll down and back up on a page! Add a Google Analytics event or use a heatmap tool like Hotjar and Microsoft Clarity to see how your readers engage with the page and test it!