滚动顶部 Jquery

Scroll Top Jquery

本文关键字：Jquery 顶部 滚动      更新时间：2023-09-26

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

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

谢谢维 琪

$('#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);
});

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

如果要进一步滚动，请在函数外部声明 var scrollAmount，当您再次单击底部链接时，计算下一个滚动 金额，最大是您的文档高度，并将其添加到全局滚动声明的 var金额。

$('#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);
});

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

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

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

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

相关文章：