分别使用 css 和 js 实现平滑滚动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/90903836

css平滑滚动

   scroll-behavior: smooth; 

支持性：不好，谷歌火狐支持；其他多数不支持

js滚动

   window.scrollTo(0,0) // 1. 回到顶部,不够友好
   Element.scrollIntoView() // 2. 让当前元素滚动到浏览器可视化区域内

举一个在react中应用的例子：ref+scrollIntoView

   <div ref={(node)=>this.node = node}></div>

  this.node.scrollIntoView({
    block: "start", 
    inline: "nearest",
    behavior: "smooth" // 平滑滚动
  });

支持性：还可以，对于无参数的滚动支持还是挺好的。

向下兼容

如果页面不支持scrollIntoView，就是用js做缓冲效果 （requestAnimationFrame + 缓冲算法）

学习地址：https://segmentfault.com/a/1190000016839122?_ea=5019384