Created
July 21, 2016 17:19
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* -----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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* 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>'; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.