0

我在 中滚动到顶部并滚动到底部jquery。在那我用百分比滚动。例如：如果从上到下50%滚动，那么它已经从上到下滚动了50%。但是现在我想滚动 50%，如果我再次单击，那么它将剩余的 50% 滚动到页面底部。我不确定如何在 jquery 中执行此操作。

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

谢谢，维姬

4

4 回答 4

1

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

如果您想进一步滚动，然后在函数外部声明 var scrollAmount，当您再次单击底部链接时，计算下一个滚动量，其中 max 是您的文档高度，并将其添加到全局 scrollAmount 声明的 var。

于 2013-10-25T09:33:18.880 回答
1 
$('#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);
});
于 2013-10-25T12:42:29.893 回答
1 
$('#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);
});
于 2013-10-25T09:37:16.570 回答
1

我稍微修改了你的小提琴。在我看来，有些计算问题。这是你的小提琴。这是你需要的吗？

首先声明一个height具有默认值的全局变量。

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

并在底部滚动中将其替换var height = $(document).height() - $(window).height();为height += $(document).height() - $(window).height();.

于 2013-10-25T09:37:31.273 回答