Realize WordPress Scroll to Top Button with jQuery

In this tutorial, I'll show you how you can implement a WordPress Scroll to Top Button in your theme with a little JavaScript and jQuery. A scroll to top link quickly takes visitors back to the top, improving the usability of the website.

For the following code examples I used a child theme for TwentySixteen.

Scroll to Top Load JavaScript in the WordPress theme

The complete functionality of the Scroll Back to Top feature can be implemented with jQuery. We therefore only need a small PHP function to load the JavaScript file for our scroll button in the footer of the theme.

The following function can be copied into the functions.php of the child theme.

 function theme_slug_scroll_to_top_js() { wp_enqueue_script( 'theme-slug-scroll-to-top', get_stylesheet_directory_uri() . '/assets/js/scroll-to-top.js', array( 'jquery' ), '1.0', true ); } add_action( 'wp_enqueue_scripts', 'theme_slug_scroll_to_top_js' );

With get_stylesheet_directory_uri () the file is loaded from the child theme .

Realize scrolling up with jQuery

Next we create the file scroll-to-top.js in the subfolder / assets / js in the child theme.

There you can now insert the following JavaScript code for the basic functionality:

 /** * Scroll to Top JS */ ( function( $ ) { $.fn.scrollToTop = function() { /* Scroll back to top when element is clicked */ $( this ).click( function () { $( 'html, body' ).animate( { scrollTop: 0 }, 300 ); return false; } ); }; } )( jQuery );

The function uses the animate () method of jQuery to create a smooth scrolling effect to the top of the screen after the passed element has been clicked.

With $.fn.scrollToTop = function() we create the scroll function as a jQuery plugin, so that the method can later be applied to any jQuery DOM objects.

A link in the footer can be converted into a scroll back to top link by simply calling up the function:

 $( 'a.scroll-up' ).scrollToTop();

Add a scroll to top button

Basically every link in the footer of the theme can be used as a scroll to top link. But we want to insert a scroll button that is automatically displayed in the lower right corner.

We therefore also implement the display of the button in JavaScript.

 $( document ).ready( function() { /* Add Button to HTML DOM */ $( 'body' ).append( '<button id=\"scroll-to-top\" class=\"scroll-to-top-button\"></button>' ); /* Add Scroll To Top Functionality */ $( '#scroll-to-top' ).scrollToTop(); } );

First we add the button in the WordPress theme before the final </body> tag. Then we apply our previously created scroll effect to the button.

$ (Document) .ready () ensures that the HTML DOM is fully loaded.

Styling for WordPress Scroll to Top Button

After the button is displayed in the frontend, you can styling the button in the style.css of the child theme.

With some CSS code, we ensure that the button is aligned in the desired position.

 .scroll-to-top-button { position: fixed; right: 40px; bottom: 40px; margin: 0; padding: 0; width: 50px; height: 50px; z-index: 9999; } .scroll-to-top-button:after { display: inline-block; margin-left: 2px; content: '\f432'; vertical-align: top; font-size: 32px; font-family: 'Genericons'; line-height: 1; }

TwentySixteen uses the Genericons Icon Font by default, which we can use to display an arrow as button content.

Hide Scroll to Top Button and show it automatically

So far, our button is practically always displayed.

But that doesn't make much sense. If visitors are at the beginning of the website, the button does not serve any purpose because it is not possible to scroll upwards.

It therefore makes sense to only display the button when the lower areas of the website can be reached by scrolling.

We achieve the desired behavior with the extension of our scrollToTop () function. The following JavaScript code can be inserted at the beginning of the function:

 var scrollButton = $( this ); /* Hide Button by default */ scrollButton.hide(); /* Show Button on scroll down */ var showButton = function() { var window_top = $( window ).scrollTop(); if ( window_top > 150 ) { scrollButton.fadeIn( 200 ); } else { scrollButton.fadeOut( 200 ); } } showButton(); $( window ).scroll( showButton );

First of all, we hide the button with hide () .

The following function showButton () ensures that the button is displayed again when the visible browser window is at least 150 pixels away from the upper edge. If the distance is shorter, the button is hidden again.

When the scroll () event is applied to the window object, it is permanently monitored whether the button should be displayed or not.

As a result, we now get a Scroll to Top button that appears automatically when the page is scrolled down.

Complete JavaScript file

I have provided the entire JavaScript file as a Github Gist :

If you have any questions or feedback about the tutorial, I look forward to your comments as always.