js scrolltop添加过度效果

在JavaScript中，scrolltop用于获取或设置元素的滚动垂直位置。想要为scrolltop添加过度效果，可以通过以下步骤实现：

1. 首先，使用scroll事件监听页面滚动的变化。当滚动事件触发时，获取当前滚动的垂直位置。

2. 创建一个名为"smoothScroll"的函数，用于实现滚动过渡效果。在函数内部，使用window.requestAnimationFrame()方法创建一个循环，用于逐渐增加或减少滚动位置。

3. 在循环中，使用当前滚动位置与目标滚动位置之间的差值，将差值除以一个可以控制滚动速度的数值，来逐渐改变滚动位置。

4. 根据滚动方向（向上或向下）以及差值的正负值，使用scrollTo()方法设置新的滚动位置。

5. 当滚动位置接近目标位置时，终止循环，完成滚动过渡效果。

以下是一个示例代码，实现了滚动过渡效果：

var scroll = 0;

window.addEventListener('scroll', function() {
  scroll = window.scrollTop || document.documentElement.scrollTop;
});

function smoothScroll(target) {
  var duration = 1000; // 过渡效果持续时间（毫秒）
  var start = scroll;
  var time = 0;

  function animationScroll(timestamp) {
    var currentTime = timestamp - time;
    var progress = Math.min(currentTime / duration, 1);
    var value = start + (target - start) * progress;

    window.scrollTo(0, value);

    if (currentTime < duration) {
      window.requestAnimationFrame(animationScroll);
    }
  }

  window.requestAnimationFrame(function(timestamp) {
    time = timestamp;
    animationScroll(timestamp);
  });
}

// 用法示例
var button = document.querySelector('#button');

button.addEventListener('click', function() {
  smoothScroll(1000); // 将页面滚动到1000px位置
});

以上就是使用JavaScript实现scrolltop添加过渡效果的方法，通过逐渐改变滚动位置来实现流畅的滚动过渡效果。