Question

我创建/使用此代码进行锚滚动：

$('#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);
});

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

Answer 1

这种简单的CSS平滑滚动可能很有用。

html {
  scroll-behavior: smooth;
}

Answer 2

这是自然现象，因为持续时间（1200ms）是固定的，并且对于更长的距离它必须更快。但是，如果您想通过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');
  });

这保证了速度几乎是固定的（或者肯定是，如果缓和是“线性的”）。

甚至在页面的每个部分都具有锚链接速度

2 个答案: