Question

是否可以在预定的时间内使用javascript从页面顶部滚动到底部？确切地说，要花90秒？

我尝试过此操作，但是滚动大约需要6秒钟，而不是我指定的10秒钟。

-var-file

Answer 1

您的示例就是这种方式，但是您需要使用文档的高度，因为$("body")的高度和$(window)的高度略有不同。

您要搜索的实际高度是document的高度：

$('body,html')
    .animate({
        scrollTop: $(document).height() - $(window).height()
    }, {
        duration: 10000,
        easing: "linear"
    });

通过$(document).height() - $(window).height()，当滚动已经位于文档底部时，您将删除多余的滚动偏移量。

看到它在这里工作： 此示例有足够的证据证明您指定的持续时间就是滚动到底部所需的时间。

var init = new Date();
var lastDate = false;

$('#go').click(function() {
  init = new Date(); //When the scroll started
  $("body,html")
    .animate({
      scrollTop: $(document).height() - $(window).height() //Bottom scroll integer
    }, {
      easing: "linear",
      duration: 10000
    });
});



//Event that handles when the scroll is at the bottom
$(window)
  .on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
      // when scroll to bottom of the page
      lastDate = new Date();
      console.log("Seconds: " + parseFloat((lastDate - init) / 1000));
    }
  });

body {
  height: 2000px;
}

#go {
  position: fixed;
  right: 150px;
  top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="go">Click</button>1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br> 1
<br> 2
<br> 3
<br> 4
<br> 5
<br> 6
<br> 7
<br> 8
<br> 9
<br> 10
<br>

注意： 如果由于某种原因您没有收到预期的行为，则可能还有其他原因导致代码冲突。 < / p>

在预定义的时间内滚动到底部

1 个答案: