滚动到顶部，Animate为百分比

Question

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

这是小提琴

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

Answer 1

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

Answer 2

如你所说，scrollTop高度以像素为单位。 来自文档 ：

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

您必须自己计算百分比：

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