javascript - 以 Animate 为百分比滚动到顶部

Question

我最近尝试使用动画 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值为7070%），然后使用该像素数.

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");
    });
});