Skip to content

Instantly share code, notes, and snippets.

@SiGaCode
Created July 21, 2016 17:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SiGaCode/93bbd724686691143209c22a07086415 to your computer and use it in GitHub Desktop.
Save SiGaCode/93bbd724686691143209c22a07086415 to your computer and use it in GitHub Desktop.
The Scroll-to-Top button, skin-integrated (exportable) and using Font-Awesome icon instead of an image. Needs the checkbox to be checked in Dynamik Design - Body - Add Support For Font Awesome Icons
// Goes to Dynamik Design - Skins - Your Skin - JS after the comments
jQuery(document).ready(function($) {
//Scroll to top button
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.up').fadeIn();
} else {
$('.up').fadeOut();
}
});
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, 800);
return false;
});
});
/* -----Scroll to top button, please edit styles to your needs, change placement if you want----- */
a.up{
position:fixed;
bottom:30px;
right:30px;
display:none;
background:#565656;
background:rgba(86,86,86,0.7);
padding:14px 14px 10px;
text-align: center;
margin: 0 0 0 0;
cursor:pointer;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
a.up:hover {
background:#AA1233;
background:rgba(170,18,51,1.0);
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
a.up .fa {
color:#ffffff;
text-shadow: 1px 1px 0 #cccccc;
font-size:30px;
margin-top:-5px;
margin-left:1px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
//* Add the scroll to top button
//* Goes to Dynamik Design - Skins - Your Skin - PHP after line 45
add_action( 'genesis_before', 'siga_to_top');
function siga_to_top() {
echo '<a href="#top" class="up" title="Back to top"><i class="fa fa-4x fa-angle-up"></i></a>';
}
@Shunyata
Copy link

Shunyata commented Feb 6, 2019

Hi SiGa, On Safari the anchor link #top is showing up on load.

It's not a big deal, but I'm wondering if it would be possible to change the #top anchor to an #Content Anchor that's added to the genesis_attr_content— As described in App Shah's Tutorial on Crunchify.

If it is possible, it would elevate the problem of having the Top text appear out in left-field on load.

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