Do you want to learn how to add back to top button in WordPress?
Scrolling through content is one of the key features of web browsing.
And even if it’s as simple as it sounds, there are still some tweaks that can IMPROVE the user experience.
Especially with the increased popularity of responsive web design and one-page websites, which lead to long-page designs both on mobile and desktop.
Yup, with a scroll back to top button!
This post covers:
- What is a back to top button?
- How to add back to top button in WordPress
- Add back to top button without a plugin
- Conclusion
- FAQs about adding back to top button in WordPress
What Is A Back To Top Button?
The back to Top button is simply a shortcut that allows users to quickly navigate to the top of the page with one click of a button.
If your website has a lot of really long pages, it bores the crap out of a visitor to scroll back to the top to get to the navigation menu and open a different page.
A sticky menu in WordPress is one of the solutions that you can implement to solve it, and the other is the back-to-top button.
And a lot of WordPress websites have both of them because they accompany each other very well.
Benefits Of Adding A Scroll To The Top Button
There are several benefits of the button:
- Improve user experience when they browse your website, which can ultimately lead to a better conversion rate.
- Better accessibility if you have very long pages. This is especially helpful on the mobile view as scrolling back up can take a lot of time.
- A more attractive UI and design since the button can fill the white space in the bottom corner of the website.
And you can add a fancy animation to the button to spice it up a bit.
How To Add Back To Top Button In WordPress
Since most of you will want to avoid coding your solution, a WordPress plugin is a way to go.
WPFront Scroll Top is MY favorite popular plugin, with 200,000+ active installs and a perfect 5-star rating.
Install and activate the WP plugin, then go to Settings > Scroll top to set up the button.
Check the Enabled ticker, save settings, and finally, refresh your page to check the back-to-top button in action.
In the case of our website, the button is already a perfect fit with its subtle design.
But every website is different, so the plugin comes with various premade buttons that you can use.
So. Handy.
And you can always upload your version of the button if none of the premade designs fit your site’s theme/branding.
A trendier option in modern web design is to use a Font Awesome icon instead of the image.
And fortunately, the WPFront Scroll Top plugin has this option built-in.
Font Awesome is the Internet’s icon library and toolkit, used by millions of designers, developers, and content creators.
The advantage is that it uses scalable SVG icons that look sharp on any resolution and in any screen size.
WPFront Scroll Top Settings
There are some important settings to consider for a seamless button implementation:
- Scroll Offset defines how far the user scrolls down the website before the button appears.
- Button Size allows you to specify how big the button is. But you can leave it to auto-size, too.
- Button Opacity can help make the button adapt to your website smoother.
- Scroll Duration is a very important setting as it defines the length of the animation that takes the user back to the top (fine-tune this parameter to achieve the optimal speed of the animation as it depends on how long your pages are). I don’t recommend making a back-to-top scroll too fast.
- Auto-hide will fade the button when you move your mouse away from it, making it invisible while you read the page’s content.
- Hide the button on responsive mode.
How To Scroll Or Jump To The ID Of An Element
Usually, the back-to-top button is used to scroll back to the website’s navigation (header).
However, you can also use it to navigate straight to a subheading or a specific point on the page. These links are also called “jump links.”
The HTML ID attribute is used to specify a unique ID for an HTML element.
It works as an anchor, marking a specific point on the page.
You can then use these markers and add specific functionality to them.
For instance, you can assign an action that takes the user to the ID of an element when clicking a button.
While the WPFront Scroll Top plugin has the option to scroll to a specific element, the use is limited to one button only.
A better option is to use the Page Scroll To ID plugin which replaces the default browser’s instant moving with an animation when links, containing element ID (#), are clicked.
This is especially useful if you have really long articles with an index at the top (like in the case of this article).
The titles in the index are connected with the subheadings below and clicking the index title will take the reader to that specific chapter with a smooth animation.
The plugin comes with adjustable scrolling animation duration and 30+ easing types, so it won’t be hard to pick the best one for you.
Add Back To Top Button Without A Plugin
If you decide you don’t want to use a plugin and would like to add the button manually, then I want to share my way of doing it with you.
First, connect to your host through the FTP client.
You need your FTP username and password for that. (Contact your hosting if you don’t have login credentials.)
Navigate to /wp-content/themes/yourtheme/js folder once connected to your website through the FTP client.
Create a new file named topbutton.js within the js folder and copy this code to the file:
jQuery(document).ready(function($){ var offset = 100; var speed = 250; var duration = 500; $(window).scroll(function(){ if ($(this).scrollTop() < offset) { $('.topbutton') .fadeOut(duration); } else { $('.topbutton') .fadeIn(duration); } }); $('.topbutton').on('click', function(){ $('html, body').animate({scrollTop:0}, speed); return false; }); });
Now it’s time to create your button (name it topbutton.png) and upload it to your WordPress media library.
After that, head to Appearance > Editor within your WordPress dashboard and open the file named style.css.
Paste this code at the end of the file:
.topbutton { height:40px; width:40px; position:fixed; right:20px; bottom:20px; Z-index:1; background-image:url("http://example.com/wp-content/uploads/2022/10/topbutton.png"); background-repeat:no-repeat; display:none; }
This code will position the button to the bottom right corner of your website and hide it.
When a visitor then starts scrolling down your page, the JavaScript function will enable the button so your users can use it to navigate back to the top of the website.
We are NOT done yet.
Open the file named functions.php where all the WordPress theme functions are stored and add this code:
function my_scripts_method() { wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/topbutton.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Finally, open the file named footer.php and place the button in the footer section of your website with this snippet:
<a href=”#” class=”topbutton”></a>
And voila, you have just coded a fully functional back-to-top button all by yourself.
Note: I highly recommend you use a plugin if you don’t have any prior coding knowledge.
Plus, don’t forget to use a WordPress backup plugin if you plan to do any core WordPress changes.
Conclusion
Most modern websites use some sort of a sticky menu, so the back-to-top button is not as important as it used to be.
Hey, it’s still a great option if you have a website with many long articles.
But if, for some reason, you are not using scroll navigation, then it’s an absolute must.
Scrolling up for seconds each time you want to get back to the menu is annoying and will drive your visitors from your website.
But you now have an excellent solution to UP your website’s user experience.
FAQs About Adding Back To Top Button In WordPress
What is a “Back to Top” button, and why should I add one to my WordPress site?
A “Back to Top” button is a user interface element that allows visitors to quickly navigate to the top of a webpage with a single click without needing to scroll manually. Adding this button enhances user experience, especially on long pages.
How can I add a “Back to Top” button to my WordPress website?
You can add a “Back to Top” button to your WordPress site by using plugins available in the WordPress plugin repository, like “WPFront Scroll Top,” or by adding custom HTML, CSS, and JavaScript code to your theme.
Can I customize the appearance of the “Back to Top” button?
Yes, you can customize the appearance of the “Back to Top” button to match your site’s design. If you’re using a plugin, many offer customization options for the button’s color, size, shape, and icon. With custom coding, you have full control over the button’s CSS styling, allowing you to tailor its look precisely.
Is it necessary to have coding skills to add a “Back to Top” button to my site?
No, coding skills are not strictly necessary to add a “Back to Top” button to your WordPress site. Many plugins available in the WordPress plugin repository enable you to add and customize the button without coding.
Does adding a “Back to Top” button impact my website’s performance or loading time?
Adding a “Back to Top” button generally has a minimal impact on your website’s performance or loading time, especially if it’s implemented efficiently. Properly implemented, the convenience and user experience benefits far outweigh the negligible impact on performance.
::
Note: This article was originally published on October 27, 2022. But our team regularly reviews it and updates it with necessary improvements for accuracy.