Skip to content

Instantly share code, notes, and snippets.

@khairulhasanmd

khairulhasanmd/index.htm

Last active May 7, 2016 08:31
Show Gist options
  • Save khairulhasanmd/792df6646b54e6efc3c8b1168bd4ac98 to your computer and use it in GitHub Desktop.
Save khairulhasanmd/792df6646b54e6efc3c8b1168bd4ac98 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll to top and Scroll to bottom
Raw
index.htm
<html>
<head>
<script>
$( document ).ready(function() {
$('#scrolltotop').fadeOut();
$('#scrolltotop').on("click", function () {
var percentageToScroll = 100;
var percentage = percentageToScroll / 100;
var height = $(document).scrollTop();
var scrollAmount = height * (1 - percentage);
console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
scrollTop: scrollAmount
}, 'slow', function () {
console.log("reached top");
});
});
$('#scrolltobottom').on("click", function () {
var percentageToScroll = 100;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
var scrollAmount = height * percentage;
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
scrollTop: scrollAmount
}, 900);
});
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#scrolltotop').fadeIn();
} else {
$('#scrolltotop').fadeOut();
}
if ($(this).scrollTop()<($(document).height() - ($(window).height()+100))) {
$('#scrolltobottom').fadeIn();
} else {
$('#scrolltobottom').fadeOut();
}
});
});
</script>
<style>
#scrolltotop {
position: fixed;
top: 10px;
right: 0;
width: 40;
height: 40;
z-index: 2;
}
#scrolltobottom {
position: fixed;
bottom: 10px;
right: 0;
width: 40;
height: 40;
z-index: 3;
}
</style>
</head>
<body>
<div id="scrolltobottom"><img src="<?php echo base_url();?>interface/img/scrolltobottom.png"></div>
<div id="scrolltotop"><img src="<?php echo base_url();?>interface/img/scrolltotop.png"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment