jQuery 根据距离改变速度

Question

我试图在滚动回浏览器顶部时保持相对恒定的速度 window 这取决于您离页面顶部有多远。

因此，如果您将页面向下滚动 500 像素或 5000 像素，我想创建一个函数来计算以恒定速度动画回到顶部需要多长时间。

var scrollTo = function() {
   var top = $(window).scrollTop();
   var dist = $('.article').offset().top;
   var speed =  // not sure what goes here depending on distance

   $('html, body').animate( {scrollTop: dist}, speed, 'linear');
};

Answer 1

您可以使用 distance * <millisecond per unit distance>、

例如，如果您想分别在 1000 毫秒和 3000 毫秒内完成 500 和 1500 的距离，那么公式将为

var speed = distance * 2

例如：

var scrollTo = function() {

  var dist = jQuery(window).scrollTop();
  var speed = dist * 2;

  $('html, body').animate({
    scrollTop: 0
  }, speed);
}

body {
  height: 5000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a style="position:fixed; top: 10px" onclick="scrollTo()">top</a>

jQuery 根据距离改变速度

jQuery change speed depending on distance

math

jquery

distance