Scroll Top Jquery

Question

I made the scroll to top and scroll to bottom in jquery . In that i make to scroll as with percentage. For example: If the scroll from top to bottom is 50% then it scroll from top to bottom as 50% it already works. But now i want to scroll the 50% if i again click then it scroll the remaining 50% to the bottom of the page. I am not sure how to do this in jquery.

Here is the fiddle Any suggestion would be great. http://jsfiddle.net/TkYpY/

Thanks, vicky

Answer 1

It does not scroll on the second click as you have already reached the scrollAmount.

If you want to scroll further then declare var scrollAmount outside the function and when you click again on the bottom link, calculate the next scroll Amount with max being your document height and add it to the global scrollAmount declared var.

Answer 2

$('#spnTop').on("click", function () {
var percentageToScroll = 80;
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");
});

});

var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
scrollAmount = scrollAmount + height * percentage;
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
    scrollTop: scrollAmount
}, 900);
});

Answer 3

I modified your fiddle a bit. Seems to me some calculation problem. Here is your fiddle . Is this what you needed?

First declare a global variable height with default value.

In top scroll code, replace var height = $(document).scrollTop(); with height -= $(document).height() - $(window).height();

and in bottom scroll replace this var height = $(document).height() - $(window).height(); with height += $(document).height() - $(window).height(); .

Answer 4

$('#spnTop').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();
if(scrollAmount > 0 )
{
scrollAmount = scrollAmount - (height * percentage);
}

console.log('scrollAmount: ' + scrollAmount);
$('html,body').animate({
    scrollTop: scrollAmount
}, 'slow', function () {
    console.log("reached top");
});

});

var scrollAmount = 0;
$('#spnbottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var height = $(document).height() - $(window).height();

 if(   scrollAmount < height)
 {
scrollAmount = scrollAmount + height * percentage;
 }
console.log('scrollAmount: ' + scrollAmount);
jQuery("html, body").animate({
    scrollTop: scrollAmount
}, 900);
});