go-to-top.txt

/* -- |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

add to functions.php in a Genesis child theme

||||||||||||||||||||||||||||||||||||||||||||||||||||||| -- */


/**
============================================================
- THEME LAYOUT: Go to top added after
============================================================*/
function cab_go_to_top() {
    echo '<a href="#" class="go-to-top fa fa-arrow-up" title="go to top"></a>';
} 
add_action( 'genesis_after', 'cab_go_to_top', 15 );




/* -- |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

put in your style.css file // adjustments will need to be made
for your situation. This is mobile first.

||||||||||||||||||||||||||||||||||||||||||||||||||||||| -- */


/* # Go to Top
---------------------------------------------------------------------------------------------------- */
.go-to-top:focus,
.go-to-top:hover {
    color: #fff;
    background: #000;
}

.go-to-top {
    display: none;
    position: fixed;
    text-decoration: none;
    width: 100px;
    height: 100px;
    line-height: 45px;
    z-index: 20;
    font-size: 20px;
    color: #fff;
    border: 3px solid #d5200d;
    background: #333;
    bottom: -50px;
    left: 50%;
    margin-left: -50px;
    border-radius: 50%;
    text-align: center;
}

.go-to-top:before {
    position: relative;
    top: 5px;
}

@media (min-width:1000px) { 
	.go-to-top {
	    bottom: -50px;
	    right: -50px;
	    left: auto;
	    text-align: left;
	}

	.go-to-top:before {
	    position: relative;
	    left: 20px;
	    top: 5px;
	}
}





/* -- |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

add to exsisting global or main js after the document ready function 
or wp_register_script &  wp_enqueue_script (don't forget to jQuery the $)

||||||||||||||||||||||||||||||||||||||||||||||||||||||| -- */

   // ______ Scroll to top  ________
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.go-to-top').fadeIn();
             $('html').addClass('body-scrolling'); // added to adjust if necessary
        } else {
            $('.go-to-top').fadeOut();
             $('html').removeClass('body-scrolling');
        }
    });
    $('.go-to-top').click(function(e) {
        $('html, body').animate({
            scrollTop: 0
        }, 800);

        e.preventDefault();
    });