时间戳

首页 > 解决方案 > 在预定义的时间段内滚动到底部

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

问题描述

是否可以在预定义的时间段内使用 javascript 从页面顶部滚动到底部？所以它需要准确的时间，比如说，90 秒？

我试过这个，但滚动需要大约 6 秒，而不是我指定的 10 秒。

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

标签： javascriptscroll

解决方案

你的例子就是这样，但你需要使用文档的高度，因为$("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>

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

推荐阅读