WordPress: How to Add a "Scroll to Top" Button in WordPress

Below are the easy steps to add a "Scroll to Top" button to a WordPress website.

Step-1 Add this Div in footer.php

?

1	<div id="back_top" style="display: block;"></div>

Step-2 Add this Java script in footer.php

?

1 2 3 4 5 6 7 8 9 10 11 12

jQuery(function() {  jQuery(window).scroll(function() {  if(jQuery(this).scrollTop() > 300) {   jQuery('#back_top').fadeIn();    } else {   jQuery('#back_top').fadeOut();  } });    jQuery('#back_top').click(function() {  jQuery('body,html').animate({scrollTop:0},500); });   });

Step-3 Add this CSS in theme's style.css

?

1 2 3 4 5 6 7 8 9 10

#back_top {     background-color: red;     bottom: 22px;     cursor: pointer;     display: none;     height: 44px;     position: fixed;     right: 200px;     width: 54px; }

Summary

1. Add the <div> for the button in footer.php.
2. Include the JavaScript for detecting scroll and enabling smooth scrolling.
3. Style the button using CSS in your theme’s style.css.

Once implemented, your website will have a functional and visually appealing "Scroll to Top" button. Customize it further to match your site's design!