动画“滚动”到页面底部附近的元素后延迟

Question

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

示例页面位于： Click Here

我的示例代码是：

<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>

Answer 1

我认为您需要考虑窗口的高度，因为它会滚动到元素的顶部。如果您的元素是粘在底部的页脚，请从滚动位置减去窗口的高度

试试这个：

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

http://jsfiddle.net/mag59hw7/11/

滚动到文档末尾后，它会尝试滚动到您的页脚，该页脚的位置低于您在页面中可以滚动的最大量。这基本上是造成延迟