One of the biggest challenges when creating long-form content on a website is that it takes up vertical space of the web page, which might cause UX (User Experience) problems for potential users.
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 top 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 6 Back to Top buttons or Go to Top link widget creators in today’s article.
Best Back to Top widgets for websites
Elfsight Back to Top Buttons
Elfsight is a popular service that provides 80+ 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 pricing table maker, testimonials slider, all-in-one reviews widget, and all-in-one chat widget.
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 – Change icons, text, colors, size, shape, layout, and more. All your edits are visible on the visual editor, 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” 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 finished creating your widget, you will be given a snippet similar to the one shown 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" data-use-service-core defer></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 Back To Top widgets.
CommonNinja’s Back To Top Button Widget
CommonNinja is another website widgets provider with over 170 plugins for websites. Some are Brackets for online Tournaments, Comparison tables for products, Graphics & Charts, Logo sliders, 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 – Choose one of three available layouts and select a preferred skin to make a Back to Top widget quickly.
- Customization – CommonNinja also lets you edit the widget as you want. Use different colors, fonts, sizes, and more settings to change the appearance to resonate with 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.
- Custom CSS, upload images, custom design, mobile preview, sharing the widget with others with a direct link, 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 CommonNinja.
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 limit of 1,000 monthly pageviews. 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) with over 60 customizable plugins for websites. Its plugin library contains widgets for displaying content and collecting information and website utilities. Some plugins are Form builder, before and after slider, eCommerce, Google Maps widget, and count-up timer.
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 keyword or anchor – This feature makes Powr the best Back to Top widget provider for professionals. Now, you can specify the widget to scroll to a specific 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.
- Design options – Change icons, colors, font family, add a custom image, set widget hover effects, etc.
- Preview mobile view, custom CSS, and JavaScript 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, 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.
Widgio’s Back to Top Plugin
Widgio is another service that provides website plugins to upgrade a site. Some of the available ones are the QR code generator, YouTube video gallery, and Instagram feed plugin.
Its Back to Top plugin is an easy-to-use widget for websites, allowing you to replace icons and text.
Features
- Templates and Layouts – Currently, there are five templates available to use. Select a preferred layout (Horizontal: Icon next to text or Vertical: Icon above text)
- Customization – Set the arrow icon, button text, button shape & size, and change the color scheme of the widget.
- Position – Specify where the widget should be placed. Also, you can set the widget’s offset, scroll position to display (in percentages), and scroll speed (in seconds).
Pricing
Widgio’s Back to Top plugin is free. However, the free plan includes certain limitations, such as 200 views/month. Paid plans start at ₤5 per month.
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 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 Go 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 just 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!