Scroll Top Jquery

Question

我将滚动设置到顶部，并在jquery中滚动到底部。在那里我按百分比滚动。例如： 如果从上到下的滚动是 50% ，则它会从上到下滚动，因为 50% 它已经有效。但现在我想滚动50％，如果我再次点击然后它将剩余的50％滚动到页面的底部。我不知道如何在jquery中这样做。

这是小提琴任何建议都会很棒。 http://jsfiddle.net/TkYpY/

谢谢， 维基

Answer 1

当您已经到达scrollAmount时，它不会在第二次单击时滚动。

如果要进一步滚动，则在函数外部声明var scrollAmount，再次单击底部链接时，计算下一个滚动量Amount，其中max为文档高度，并将其添加到全局scrollAmount声明的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

我修改了你的小提琴。在我看来有些计算问题。 Here is your fiddle。 这是你需要的吗？

首先使用默认值声明全局变量height。

在顶部滚动代码中，替换 var height = $(document).scrollTop(); 同 height -= $(document).height() - $(window).height();

并在底部滚动中将此var height = $(document).height() - $(window).height();替换为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);
});