Skip to content

Instantly share code, notes, and snippets.

@chancesmith

chancesmith/scroll-to-top.html

Created October 24, 2016 16:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chancesmith/dbcd931d089f295998e936271536e01a to your computer and use it in GitHub Desktop.
Save chancesmith/dbcd931d089f295998e936271536e01a to your computer and use it in GitHub Desktop.
Download ZIP
Scroll-to-top icon (slide in/out)
Raw
scroll-to-top.html
<style>
// scroll to top
#back-to-top{
position: fixed;
bottom: -66px;
right: 20px;
color: white;
z-index: 3;
width: 40px;
height: 40px;
border-radius: 100%;
padding: 0 0 0 8px;
font-size: 24px;
background: #a19c94;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
top: initial !important;
}
</style>
<body></body>
<script>
$(document).ready(function() {
////
// scroll to top
////
// inject back to top arrow
$('body').prepend('<a href="javascript:" id="back-to-top" style="bottom:-66px;"><i class="fa fa-chevron-up"></i></a>');
/// ===== Scroll to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 350) { // If page is scrolled more than 50px
$('#back-to-top').css('bottom','16px'); // Slide in the arrow
} else {
$('#back-to-top').css('bottom','-66px'); // Slide out the arrow
}
});
$('#back-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment