Menu
Disclosure: ULTIDA's content is free & reader-supported. We may earn a commission if you click & buy through our links. Your support helps us create the best content & make a difference.
Tutorials

How To Add Back To Top Button In WordPress

add back to top button in wordpress

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?

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:

  1. Improve user experience when they browse your website, which can ultimately lead to a better conversion rate.
  2. 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.
  3. 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.

back to top button plugin settings

Check the Enabled ticker, save settings, and finally, refresh your page to check the back-to-top button in action.

wordpress back to top button example

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.

wordpress back to top button designs

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 back to top button

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.

::

Note: This article was originally published on October 27, 2022. But our team regularly reviews it and updates it with necessary improvements for accuracy.

About Author

Ales has been in love with computers ever since he got Amiga 500 almost 30 years ago. He earned his bachelor’s degree in Computer science from Ljubljana University, Slovenia. In 2010 he co-founded PremiumCoding, a website that makes awesome WordPress themes that are also for sale on ThemeForest. In the past few years, he focused mainly on combining web design, code and photography into a seamless experience.