Lego2012
12/13/2016 - 4:36 PM

Back To Top

Back To Top

.to-top {
	display:inline-block;
	height:40px;
	width:40px;
	position:fixed;
	bottom:40px;
	right:10px;
	box-shadow:0 0 10px rgba(0,0,0,0.05);
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	background:rgba(232,98,86,0.8) url(images/to-top.svg) no-repeat center 50%;
	visibility:hidden;
	opacity:0;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	transition:all .3s;
}

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

.to-top.top-fade-out {
	opacity:.5;
}

.no-touch .to-top:hover {
	background-color:#e86256;
	opacity:1;
}

@media only screen and (min-width: 768px) {
	.to-top {
		right:20px;
		bottom:20px;
	}
}

@media only screen and (min-width: 1024px) {
	.to-top {
		height:60px;
		width:60px;
		right:30px;
		bottom:30px;
	}
}
// Enqueue To Top script
add_action( 'wp_enqueue_scripts', 'to_top_script' );
function to_top_script() {
    wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/to-top.js', array( 'jquery' ), '1.0', true );
}

// Add To Top button
add_action( 'genesis_before', 'genesis_to_top');
	function genesis_to_top() {
	 echo '<a href="#0" class="to-top" title="Back To Top">Top</a>';
}
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 = $('.to-top');

    //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
        );
    });

});