Jquery 设置动画后延迟“；卷轴；指向页面底部附近的元素

我有一个网页，我在折叠上方的圆圈中显示一个向下的箭头，表示下面有更多的内容。单击此箭头时，我将jQuery放置到位，以执行动画滚动到页面底部，然后jQuery滚动回所需位置。当动画到达页面底部时，我希望jQuery立即开始向上滚动到所需的位置，而不会在页面底部短暂停顿。我尝试在每个动画结束时使用jQuery并使用和不使用函数选项，但我仍然注意到当第一个动画到达页面底部时会出现暂停

示例页面位于：

我的示例代码是：

<script type="text/javascript">
$(document).ready(function (){
         $("#arrow-circle").click(function (){
                //$(this).animate(function(){

                $('html, body').animate({
                scrollTop: $("#footer-seamless-name").offset().top
                }, 2500);

                $('html, body').animate({
                scrollTop: $("#arrow-circle").offset().top
                }, 1000);

                $('html, body').animate({
                scrollTop: getFoldHeight()
                }, 1000);
                //});
            });
       });
</script>

<script type="text/javascript">
 $(document).ready(function (){
            $("#arrow-circle").click(function (){
                //$(this).animate(function(){

                $('html, body').animate({
                scrollTop: $("#footer-seamless-name").offset().top
                }, 2500, function() {

                    $('html, body').animate({
                    scrollTop: $("#arrow-circle").offset().top
                    }, 1000, function () {

                    $('html, body').animate({
                    scrollTop: getFoldHeight()
                    }, 1000);
               //});
            });
        });
            });
 });
</script>

$（文档）.ready（函数（）{
$（“#箭头圆”）。单击（函数（）{
//$（this.animate（function（））{
$（'html，body'）。设置动画({
scrollTop:$（“#页脚无缝名称”）.offset（）.top
}, 2500);
$（'html，body'）。设置动画({
scrollTop:$（“#箭头圆”）.offset（）.top
}, 1000);
$（'html，body'）。设置动画({
scrollTop:getFoldHeight（）
}, 1000);
//});
});
});
$（文档）.ready（函数（）{
$（“#箭头圆”）。单击（函数（）{
//$（this.animate（function（））{
$（'html，body'）。设置动画({
scrollTop:$（“#页脚无缝名称”）.offset（）.top
}，2500，函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#箭头圆”）.offset（）.top
}，1000，函数（）{
$（'html，body'）。设置动画({
scrollTop:getFoldHeight（）
}, 1000);
//});
});
});
});
});
我认为你需要考虑窗口的高度，因为它会滚动到元素的顶部。如果您的元素是粘贴到底部的页脚，请从滚动位置减去窗口的高度

试试这个：

$('html, body').animate({ scrollTop: $("body").height() - $(window).height() }, 2500,function() {
    $(this).animate({ scrollTop: $("#arrow-circle").offset().top }, 1000)
})


在完成滚动到文档末尾后，它会尝试滚动到页脚，页脚的位置低于您可以在页面中滚动的最大值。这基本上是造成延迟的原因
可能包括问题中的
html
，
getFoldHeight（）
？为了学习，为什么您的方法没有出现不希望的暂停？当您滚动到特定位置时，您的函数会滚动到元素的顶部（在您的情况下是页脚）。您无法滚动到页脚的顶部，因为页脚的最大滚动次数低于页面中的最大滚动次数。这就是为什么您需要滚动到文档窗口高度的
底部。如果您的页脚高度接近您的窗口高度，则会调整浏览器窗口的大小，使其与页脚高度相等，并且您的代码将WorkID我的解释帮助@这是正确的理解吗？我最初的方法是尝试向下滚动，滚动量等于页面顶部和我引用的页脚元素之间的空间。由于启动此滚动过程的要单击的元素位于初始折叠的正上方，因此没有足够的垂直高度来滚动此数量，因此滚动在要滚动的数量耗尽之前到达页面的末尾，所以我注意到一个暂停，因为屏幕不能再向下滚动了，但是代码想要再滚动一些。