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 in the first place.
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 are helpful to 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 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.
- 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, widget management, and more.
Back to top button examples
Here are some available widget examples.
How to create Back to the top widget using ElfSight
Use the live widget builder on the official website to create your free Back to top widget, or sign up on the official website and start designing from your dashboard.
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 of 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.
You can add the
"data-elfsight-app-lazy" attribute to the HTML go to the top widget to lazy load the widget. Lazy loading refers to loading the widget after other content on the webpage is loaded.
<script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-0291c3e9-7406-4789-b68d-e874929516d7" data-elfsight-app-lazy ></div>
Here’s a video tutorial on how to make a back to the top widget on ElfSight.
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. Those ElfSight monthly prices begin from $15 and are best suited if you want to use multiple apps on your site.
Click here to try ElfSight Back To Top widgets.
Powr Scroll to Top Plugin
Powr is another site like ElfSight (which we compared in ElfSight vs. Powr review) with over 40 customizable plugins for websites. Its plugins library consists of widgets for displaying content and collecting information and website utilities. Some plugins are countdown timer, form builder, before and after slider, eCommerce, Google Maps widget, and count-up timer.
Powr’s Scroll to Top plugin consists of an intuitive visual editor and advanced customization options.
- 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 and set widget hover effects, etc.,
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 50+ apps, such as Form Builder and Popup widget editor.
Click here to try Powr’s Scroll to Top widget.
CommonNinja’s Back To Top Button Widget
CommonNinja is another website widgets provider with over 50 plugins for websites. Some are Brackets and Tournaments, Comparision 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.
- 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.
- Custom CSS, upload images, custom design, mobile preview, share the widget with others with direct a link, and more.
Here’s a video tutorial on how to use CommonNinja to craft a Go to Top button widget.
Like Back to Button providers, CommonNinja offers a free plan. But, it has many limits: Up to 300 monthly pageviews, Creating two Back to top widgets, and CommonNinja’s branding on widgets. You must upgrade to the Premium plan to remove the monthly pageview limit on the free plan and the branding. It costs $5 per month.
Click here to try CommonNinja.
Widgio’s Back to Top Plugin
Widgio is another service that provides website plugins to upgrade a site. Amazon reviews widget, QR code generator, Youtube video gallery, and Instagram feed plugin are some of the available ones.
Its Back to Top plugin is an easy-to-use widget for websites allowing you to replace icon and text.
- 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).
Widgio’s Back to Top plugin is free of cost. However, the free plan includes certain limits, such as limited to 200 views/month. Paid plans start from ₤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 top with progress indicator
See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.
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 content.
- 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?
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!