
Back to Top buttons are very helpful on blogs and websites. “Back To Top” button is used to facilitate the readers if the readers want to scroll the page up.
Moreover, you will be overwhelmed if the button does a nice scrolling animation when the page goes up. Such buttons are called smooth scrolling buttons. So here’s a tutorial of how to implement a smooth scrolling back to top button on your WordPress blog.

NOTE:
If you are looking for Scroll to Top button without Javascript
then follow this tutorial.
Here are the steps:
Step-1
Put below CSS file to your WordPress Theme’s style.css file.
.crunchify-top:hover { color: #b11f24!important } .crunchify-top { position: fixed; bottom: 70px; right: 70px; cursor: pointer; z-index: 999; } .top-arrow { color: #fff; position: absolute; background: #0c0c0c; border-radius: 2px; padding: 0px 11px; }
Other must read:
- Genesis Framework: How to Disable Post Meta Info on Homepage
- How to use AJAX, jQuery in Spring Web MVC (.jsp) – Example
Step-2
Put below Script function to your theme’s header.php
. On Crunchify we are using our own All in One Optimizer and Customizer plugin which has Header / Footer section.
<!-- Crunchify's Scroll to Top Script --> <script> jQuery(document).ready(function() { var offset = 500; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.crunchify-top').fadeIn(duration); } else { jQuery('.crunchify-top').fadeOut(duration); } }); jQuery('.crunchify-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>
Step-3
Open your theme’s functions.php file and add below code at the bottom of file.
add_action('wp_footer', 'crunchify_add_scroll_to_top'); function crunchify_add_scroll_to_top(){ echo '<a href="#" class="crunchify-top"><span class="top-arrow">↑</span></a>'; }
Or if you are loading font-awesome fonts already then use below code.
add_action('wp_footer', 'crunchify_add_scroll_to_top'); function crunchify_add_scroll_to_top(){ echo '<a href="#" class="crunchify-top"><span class="top-arrow"><i class="fas fa-chevron-up"></i></span></a>'; }
You can check it out the same on this site. Just take a look at bottom right corner and you should see Scroll to Top button.

Let me know if you face any issue adding Scroll to Top button on your WordPress site.