js实现页面或DOM元素平滑滚动

在前端开发页面的工作中，经常会遇到点击导航栏页面滚动到某一指定区域的需求，直接使用window.scroll或者window.scrollTo方法可以实现该需求，但是现实场景中我们希望滚动更加平滑，并且我们希望不仅仅是window能滚动，在某一个设置了overflow-y:scroll属性的div中也能滚动到某一位置。在此，我们以在vue中的实际场景为例：

1.window.requestAnimationFrame()

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。使用该方法能够最大限度的利用浏览器的刷新频率触发回调函数，这样在触发滚动事件的时候就可以动态设置滚动条高度，实现平滑滚动的视觉效果。具体文档可参见MDN关于window.requestAnimationFrame()的介绍

2.封装公共的方法

// 获取当前滚动的高度 Dom为目标元素
const getScrollTop = function (Dom) {
    
  return Dom.scrollTop;
};
// 设置滚动条
const setScrollTo = function (Dom, value) {
    
  Dom.scrollTo(0, value);
  return value;
};

3.平滑滚动smoothScroll方法实现

const smoothScroll = function (Dom, to, duration) {
    
  if (duration < 0) {
    
    setScrollTo(Dom, to);
    return;
  }
  let diff = to - getScrollTop(Dom);
  if (diff === 0) return;
  let step = (diff / duration) * 10;
  requestAnimationFrame(function () {
    
    if (Math.abs(step) > Math.abs(diff)) {
    
      setScrollTo(Dom, getScrollTop(Dom) + diff);
      return;
    }
    setScrollTo(Dom, getScrollTop(Dom) + step);
    if ((diff > 0 && getScrollTop(Dom) >= to) || (diff < 0 && getScrollTop(Dom) <= to)) {
    
      return;
    }
    smoothScroll(Dom, to, duration - 20);
  });
};

4.完整代码

let requestAnimationFrame = (function () {
    
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function (callback) {
    
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();
// 获取当前滚动的高度
const getScrollTop = function (Dom) {
    
  return Dom.scrollTop;
};
// 设置滚动条
const setScrollTo = function (Dom, value) {
    
  Dom.scrollTo(0, value);
  return value;
};
// 滚动
const smoothScroll = function (Dom, to, duration) {
    
  if (duration < 0) {
    
    setScrollTo(Dom, to);
    return;
  }
  let diff = to - getScrollTop(Dom);
  if (diff === 0) return;
  let step = (diff / duration) * 10;
  requestAnimationFrame(function () {
    
    if (Math.abs(step) > Math.abs(diff)) {
    
      setScrollTo(Dom, getScrollTop(Dom) + diff);
      return;
    }
    setScrollTo(Dom, getScrollTop(Dom) + step);
    if ((diff > 0 && getScrollTop(Dom) >= to) || (diff < 0 && getScrollTop(Dom) <= to)) {
    
      return;
    }
    smoothScroll(Dom, to, duration - 20);
  });
};
export default {
    
  getScrollTop,
  setScrollTo,
  smoothScroll,
};

本实例没有考虑太多的兼容问题，但是总体思想应该是正确的，在谷歌（86.0.4240.198）正式版本上测试没有问题。后续遇到兼容问题再来补充。
------------------------2021.1.26更新-------------------------
推荐两个方法库：
smooth scroll behavior polyfill
jump.js