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/

滚动到文档末尾后，它会尝试滚动到您的页脚，该页脚的位置低于您在页面中滚动的最大数量。这基本上导致了延迟

动画后延迟＆＃34;滚动＆＃34;到页面底部附近的元素

1 个答案: