Skip to content

Instantly share code, notes, and snippets.

@JanHoek
Last active May 10, 2019 04:34
Show Gist options
  • Save JanHoek/9f27c1c6a70f8ef3fbfe to your computer and use it in GitHub Desktop.
Save JanHoek/9f27c1c6a70f8ef3fbfe to your computer and use it in GitHub Desktop.
Simple en smooth Back-To-Top button for Genesis
<?php //* Don't copy the php
// 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>';
}
.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;
}
}
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
);
});
});
@chadhatzenbuhler
Copy link

Added this to my site and unable to get it to function? http://www.mandansoftball.com

@dharmendra123456
Copy link

hello sir added this code to my site and unable to get it to function? Digital New Hunt

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment