Select Page

Site navigation is a very important aspect of user experience. The user should feel effortless in accessing your content or the services you provide. The ultimate need is to make the user stay on your website longer and engage in your products or services. The Back to Top Button in WordPress would help the users reach the top easily. This back to top button is of great help especially when you have long pages or infinite scroll.

back to top button for wordpress

Back to top button for WordPress

Related: Top Best Drag and Drop WordPress Page Builders Compared (2018)

In this article let us discuss in detail on how to add a smooth and dynamic back to top button in WordPress website. Required minor experience in editing themes. And if you are not interested or confident in altering the codes in your website there is a simple solution. Just add the Smooth Page Scroll to Top WordPress plugin and leave the rest to it.

Why and When use Back to Top Button in WordPress?

If you have a lot of content on your page or post, and especially if your post attracts a lot of comments, users would love to read those comments. So once after reading, they would get back to read further content on your website. Scroll to top button would greatly help them reach the top with less effort. The simple line of code below would help you achieve this without using jQuery.

<a href=”#” title=”Back to top”>^Top</a>

This will send the users to the top of the page in milliseconds. But a smooth back to top button will be better as it takes the user to the top smoothly which will provide a better user experience.

Back to Top Button in WordPress using jQuery

To do this we will be using jQuery, CSS and a small bit of HTML code in the WordPress theme. Now open any text editor like Notepad. Create a new file and save it as backtotop.js. Copy and paste the following code the text file.

jQuery(document).ready(function($){

$(window).scroll(function(){

if ($(this).scrollTop() < 200) {

$(‘#smoothup’) .fadeOut();

} else {

$(‘#smoothup’) .fadeIn();

}

});

$(‘#smoothup’).on(‘click’, function(){

$(‘html, body’).animate({scrollTop:0}, ‘fast’);

return false;

});

});

Save the file and upload it to your WordPress theme’s file directory’s /js/ folder. If you don’t find one, then create one and upload backtotop.js to the folder. This jQuery script will take the users to the top of the page. Now you have to embed the code to your theme file. Copy and paste the following code to your theme’s functions.php file.

wp_enqueue_script( ‘smoothup’,

get_template_directory_uri() . ‘/js/backtotop.js’,

array( ‘jquery’ ), ”, true );

In the above code, it is said to WordPress that to load the script and also the jQuery library because our plugin relies on it. Now it’s time to add the actual link to WordPress to take users to the top. Copy and paste this HTML any where in your theme’s footer.php file.

<a href=”#top” id=”smoothup” title=”Back to top”></a>

There is a link without linking it to any text because, we are goint to use an image to display the back to top button. For this example we are using a 51*51px up arrow image. Copy and paste the following code to your theme’s stylesheet.

#smoothup {

height: 40px;

width: 40px;

position:fixed;

bottom:50px;

right:100px;

text-indent:-9999px;

display:none;

background: url(“https://thehk.online/wp-content/uploads/2018/09/back-to-top.png”);

-webkit-transition-duration: 0.4s;

-moz-transition-duration: 0.4s; transition-duration: 0.4s;

}

#smoothup:hover {

-webkit-transform: rotate(360deg) }

background: url(”) no-repeat;

}

In the CSS above, we have placed the back to top button as fixed at a certain position which you can alter if you want. Also, there is a small animation in the code which is the button will rotate 360 degrees when you hover your mouse. So this will take your users to the top smoothly when clicked.

I hope this article helped you out in taking your users back to top on your pages that are long. Comment below if you face any issues.