As site owners, we always strive to make a site more user friendly, and the best way to create a good user experience is to make it easy for site visitors to use. Adding a “scroll to top” (or back to top) button to your site can be a great way to improve a navigation of a site, especially if you have long-scrolling pages or infinite scroll functionality.
The amount of information on your page or post can vary, and when the page or post has a lot of content then your site visitors have to scroll down in order to read the entire content. As they scroll down, all the header navigational links remain on its position, and, therefore, become not available for the use.
A “back to the top” button enables users who have scrolled through the content to quickly return to the top of the page. The button appears when a user starts scrolling the page, and it remains in a fixed position on your site so the user can see the button during the scroll.
It’s possible to have the “scroll to top” button on your WordPress site, and there are two ways to add it: either use a plugin or write a custom code. If you are using the Goedemorgen theme then you can display this button without adding any plugins or writing any code. Theme comes with a built-in feature to display the “back to top” button.
Method #1: Using WordPress Plugin
Below you can find a list of popular “Scroll to Top” WordPress plugins that you can use on your site. By choosing this method, you do not need to edit any files of your theme because the plugin will do everything for you. Simply choose the plugin that best fits your site and install it.
Scroll Back to Top is a WordPress plugin to add a button that appears only when users scroll down the page allowing them to scroll to the top of the page. The plugin comes pre-configured and is fully functional on activation. The plugin offers a number of webmaster-friendly features to completely customize the look, position, and animation.
This WordPress plugin adds an automatic and dynamic “To Top” button to easily scroll long pages back to the top. Also, it features an intuitive control panel to style and adjust to each website’s need. The button only appears for JS enabled browsers and can be optionally disabled for mobile visitors.
WPFront Scroll Top plugin allows the visitor to easily scroll back to the top of the page, with fully customizable options and image. WPFront Scroll Top plugin has the following features.
Smooth Scroll Up is a lightweight plugin that creates a customizable back to top feature in your WordPress website.
Smart Scroll Top plugin is designed to display a custom and flexible Back To Top button on your WordPress site. It comes with unlimited color choices, position switcher, and customizable text.
This plugin adds a Scroll to top button to the footer of your WordPress site and smoothy scrolls the page when a user clicks on it. The button appears only when the height of the web page exceeds the height of browser window; otherwise, the button remains invisible on your site. The plugin comes with bunch of icons to suit your site color.
A simple WordPress plugin which adds a “scroll to top” button to the bottom corner of the page if the page has been scrolled down. It is compatible with all major browsers and should work with all themes, including responsive and high resolution themes.
Method #2: Adding Custom Code
In this method, we are going to write a code which will add a smooth back to top effect to your WordPress site. Please note, current method requires editing theme files so it’s not recommend to do it on your live (production) site. Moreover, if you are planning to make changes to your theme then it’s WordPress best practice to use a child theme so you can keep your changes after the theme updates.
Ready? Let’s add some code!
Third, add a button style (you can find it below, in the third code block) to your theme’s stylesheet.
Do you think that a “Back to Top” button is useful for a site? Let us know by leaving a comment below.