Created
October 6, 2017 11:22
-
-
Save jsakhil/982d3fdb05b1f66da6d6f1fbb2f2b680 to your computer and use it in GitHub Desktop.
Simple Return to Top,
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
/* Return To Top */ | |
#return-to-top { | |
position: fixed; | |
bottom: 20px; | |
right: 20px; | |
background: rgb(0, 0, 0); | |
background: rgba(0, 0, 0, 0.7); | |
width: 50px; | |
height: 50px; | |
display: block; | |
text-decoration: none; | |
-webkit-border-radius: 35px; | |
-moz-border-radius: 35px; | |
border-radius: 35px; | |
display: none; | |
-webkit-transition: all 0.3s linear; | |
-moz-transition: all 0.3s ease; | |
-ms-transition: all 0.3s ease; | |
-o-transition: all 0.3s ease; | |
transition: all 0.3s ease; | |
} | |
#return-to-top i { | |
color: #fff; | |
margin: 0; | |
position: relative; | |
left: 16px; | |
top: 13px; | |
font-size: 19px; | |
-webkit-transition: all 0.3s ease; | |
-moz-transition: all 0.3s ease; | |
-ms-transition: all 0.3s ease; | |
-o-transition: all 0.3s ease; | |
transition: all 0.3s ease; | |
} | |
#return-to-top:hover { | |
background: rgba(0, 0, 0, 0.9); | |
} | |
#return-to-top:hover i { | |
color: #fff; | |
top: 5px; | |
} |
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
<!-- RETURN TO TOP --> | |
<a href="javascript:" id="return-to-top"><i class="fa fa-angle-up" aria-hidden="true"></i></a> | |
<!-- RETURN TO TOP --> |
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 ==== */ | |
jQuery(window).scroll(function() { | |
if (jQuery(this).scrollTop() >= 50) { | |
jQuery('#return-to-top').fadeIn(200); | |
} else { | |
jQuery('#return-to-top').fadeOut(200); | |
} | |
}); | |
jQuery('#return-to-top').click(function() { | |
jQuery('body,html').animate({ | |
scrollTop : 0 | |
}, 500); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment