javascript - 锚定链接速度甚至在页面的每个部分

Question

我创建/使用此代码进行 anchor 滚动:

$('#Anchors').click(function(e){
  e.preventDefault();
  var target = this.hash;
  var $target = $(target);
  var scrollTo = $target.offset().top - 80
  $('body, html').animate({scrollTop: scrollTo+'px'}, 1200);
});

我需要帮助，因为如果我位于页面顶部并按链接在页面上向下滚动，速度太快了。但如果我在半页上并按 anchor ，那么速度就可以了。那么如何才能使页面每个部分的滚动速度相同呢？

Answer 1

这是一种自然行为，因为持续时间(1200 毫秒)是固定的，并且距离较长时必须更快。 但如果你想通过 javascript 解决这个问题，你可以使持续时间动态化:

  $('#Anchors').click(function(e){
    e.preventDefault();
    var target = this.hash;
    var $target = $(target);
    var scrollTo = $target.offset().top;

    var distance = Math.abs($(window).scrollTop() - scrollTo)
    var duration = distance/750; // 750px in 1s, you can change it
    $('body, html').animate({scrollTop: scrollTo+'px'}, duration * 1000, 'linear');
  });

这保证了速度几乎(或者当然，如果缓动是“线性的”)是固定的。