Question

我最近尝试使用动画jquery将滚动设置为顶部。一切似乎都好。但我需要像百分比那样做。例如 scrollTop为100%，然后滚动为100％。我不确定。现在我相信它是像素。如何在jquery的动画函数中使用百分比，例如scrollTop:100% 我尝试了但是我得到了控制台错误。

以下是 fiddle

 $('#spnTop').on("click",function(){
    $('html,body').animate({ scrollTop: 0 }, 'slow', function () {
                          alert("reached top");
                        });
    });

Answer 1

正如您所发现的，animate需要一个像素值，您必须获取元素的高度（innerHeight可能是最好的），将百分比应用于它（{{1假设Math.round(height * percentage / 100)的值为percentage（70％），然后使用该像素数。

Answer 2

正如您所说，scrollTop高度以像素为单位。来自docs：

一个整数，指示将滚动条设置为的新位置。

您必须自己计算百分比：

$('#spnTop').on("click",function(){
    var percentageToScroll = 0.50;
    var documentHeight = $(document).height();
    var scrollAmount = Math.floor(documentHeight * percentageToScroll);
    $('html,body').animate({ scrollTop: scrollAmount }, 'slow', function () {
                          alert("reached top");
    });
});

滚动到顶部，Animate为百分比

2 个答案: