Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Rameshwar-ghodke/f0305f704aecd04ee5977cc970c5b9d9 to your computer and use it in GitHub Desktop.
Save Rameshwar-ghodke/f0305f704aecd04ee5977cc970c5b9d9 to your computer and use it in GitHub Desktop.
Scroll back to Top of the Page Button using Javascript
// HTML
===========================
<a id="back2Top" title="Back to top" href="#">&#10148;</a>
// CSS
===========================
#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 999;
display: none;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: 0;
background-color: #DDD;
color: #555;
text-align: center;
font-size: 30px;
text-decoration: none;
}
#back2Top:hover {
background-color: #DDF;
color: #000;
}
// Javascript
================================
/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$('#back2Top').fadeIn();
} else {
$('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
/*Scroll to top when arrow up clicked END*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment