How To Add a Back To Top Button In Genesis Theme

If you are a full-time blogger and you often write long posts, then your theme should support ‘Back to top’ function.

Because it helps the user in reaching the header in no time. After reading this tutorial, you will be able to add a back to top or scroll to top button in your theme.

Let’s get started.

In order to make a scroll to top button, we have to add a link to the header.

After that, we have to add an active button to genesis theme.

First of all, we have to create a file in JS folder and name the file as site-back.js. Now paste this code in the file you just created.

jQuery(document).ready(function($){
 // Scroll (in pixels) after which the "To Top" link is shown
 var offset = 300,
 //Scroll (in pixels) after which the "back to top" link opacity is reduced
 offset_opacity = 1200,
 //Duration of the top scrolling animation (in ms)
 scroll_top_duration = 700,
 //Get the "To Top" link
 $back_to_top = $('.site-back');

//Visible or not "To Top" link
 $(window).scroll(function(){
 ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('top-is-visible') : $back_to_top.removeClass('top-is-visible top-fade-out');
 if( $(this).scrollTop() > offset_opacity ) { 
 $back_to_top.addClass('top-fade-out');
 }
 });

//Smoothy scroll to top
 $back_to_top.on('click', function(event){
 event.preventDefault();
 $('body,html').animate({
 scrollTop: 0 ,
 }, scroll_top_duration
 );
 });

});

The above code is important, copy it correctly. After that, we need to add some CSS in themes stylesheet. The CSS code is below.

/* Site Back Button 
--------------------------------------------------------------*/
.site-back {
 display:block;
 height:40px;
 width:40px;
 position:fixed;
 bottom:0;
 right:0;
 box-shadow:0 0 10px rgba(0,0,0,0.05);
 overflow:visible;
 text-indent:100%;
 white-space:nowrap;
 background:rgb(63, 180, 193) url(images/to-top.svg) no-repeat center 50%;
 visibility:visible;
 opacity:0;
 -webkit-transition:all .3s;
 -moz-transition:all .3s;
 transition:all .3s;
 border-radius: 50%;
}

.site-back.top-is-visible {
 visibility:visible;
 opacity:1;
}

.site-back.top-fade-out {
 border: 1px solid #906e6e;
}

.no-touch .site-back:hover {
 background-color:red;
 opacity:1;
}

@media only screen and (max-width: 768px) {
 .site-back {
 bottom:10px;
 right: 10px;
 }
}
@media only screen and (min-width: 768px) {
 .site-back {
 bottom:10px;
 right: 10px;
 }
}

@media only screen and (max-width: 1024px) {
 .site-back {
 right:30px;
 bottom:30px;
 }
}

We are almost there. Now, we will add some code to the functions.php file.

// Enqueue Site-Back script
add_action( 'wp_enqueue_scripts', 'site_back_script' );
function site_back_script() {
 wp_enqueue_script( 'site-back', get_stylesheet_directory_uri() . '/js/site-back.js', array( 'jquery' ), '1.0', true );
}
// Add Back to Top button
add_action( 'genesis_before', 'genesis_site_back');
 function genesis_site_back() {
 echo '<a href="#0" class="site-back" title="Back To Top">Top</a>';
}

If you have checked the CSS code I provided, there I have added a background image to it. So we need that image.

You can download the image here.

Download Image Here

After that, you have to upload that image to Images folder of the current theme.

Refresh the stylesheet and see the changes.

Please, let me know if you have any questions.