Website Guider

The Ultimate Resource for WPadmins and Geeks

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.

Raashid Din Dar

Raashid Din Dar is a web developer and designer. He specialises in WordPress Theme and Plugin development. Also, Web Designing is what he loves.He loves to read books and play with friends.

5 thoughts on “How To Add a Back To Top Button In Genesis Theme

  1. Hi Rasshid, I’m having just a tad bit of trouble with the graphic. As it is the color is covering up the upward pointing arrow.

    I’ve played around with it, changing the graphic and background color, but really don’t have clue how to troubleshoot this. Any advice would be most appreciated, Thx

    1. Please try applying z-index:999 to it. The arrow will have high priority over other colors by applying z-index. Thanks

      1. HI Raashid, I wanted to thank you for your kind assistance— Without your help, it could have taken me too many wasted hours to find out that my truncated link to the image file was non-functional.

        I would still really like to know if and how I could trigger the “Back to Top” functionality, by way of another html element.

        Also, on a side note— I’m wondering if I could pay you to help me migrate another website from a defunct theme to a new one. Long story!

  2. Hi, It looks good but it’s not visible in Chrome. Do you have any solution?

    Sincerely
    Mats

    1. Will you please use our support section so we can serve you better.
      Also, the code is first tested in Google Chrome then we test our code in other browsers.
      Thanks

Leave a Reply

Your email address will not be published.

Back to top