Adding a back to top button to your WordPress site

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

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.

Download


Dynamic “To Top” Plugin

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.

Download


WPFront Scroll Top

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.

Download


Smooth Scroll Up

Smooth Scroll Up is a lightweight plugin that creates a customizable back to top feature in your WordPress website.

Download


Smart Scroll Top

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.

Download


Ax ScrollTo Top

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.

Download


Scroll to Top Button

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.

Download

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!

First, create a JavaScript file and save it as back-to-top.js. Copy and paste the code in the file which you can find below in the first code block. Place this file to your theme’s JavaScript folder which can be found in wp-content/ themes/theme_name/js. If your theme does not have a js folder, then go ahead and create a folder for your JavaScript file.

Second, open your functions.php file and add the code which is located in the second code block. This code will add a button to your WordPress site and load a JavaScript file that you’ve created before.

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.

3 comments

  1. Hello Taras Dashkevych, that was a really simple yet amazing solution. Thank you for presenting it.

    I have tried so many plugins which added a lot of unnecessary functionality. That’s a bad way to build a website. Simple functionality has to be built using simple solutions, like the one presented in your post.

    Thank you and keep posting more such useful stuff.
    Good day!

    1. Hi Manju,

      I’m glad to hear that you to hear that you’ve found this post useful 🙂

  2. Hi,
    I tried the jQuery solution, it works fine for me!
    It’s nice and simple to install.
    Thank you for sharing.
    Regards,

Comments are closed.