背景公司最近开发了公众号H5，做了一个点击图标滚动到顶部的功能。实现功能比较简单，直接调用window.scrollTo(0,0)即可，一行代码完成。但是作为一个攻城狮，怎么可能对自己要求这么低，所以给自己加了一个要求，实现页面平滑滚动到顶部的功能。经过研究和查看文档，有以下三个选项。1、用CSS完成最高层的功能，只用CSS搞定。代码如下：html{scroll-behavior:smooth;}这个样式的作用是为带有滚动条的元素指定一个滚动行为，但是只有在用户手动导航或者CSSOM滚动API触发滚动时才会生效，并且不会影响导致滚动的用户行为。正庆祝的时候，打开caniuse查看兼容性：处理完狗，还是老老实实用JS实现吧。2、使用Window.scrollToAPI我们都知道window.scrollTo(x,y)，它可以通过传入文档中的x、y轴坐标实现滚动到页面某个位置的功能。其实这个API还可以传入一个option，是一个对象，left值对应坐标中的x，top对应坐标中的y，还有一个valuebehavior，可以自定义滚动行为，然后我们通过这种方式实现滚动到顶部：window.scrollTo({left:0,top:0,behavior:'smooth'})nice,done。几天后，产品经理拿着5米的大砍刀来找我，说Safari的滚动效果很奇怪，体检极差。于是默默打开MDN文档，滚到最下面：看到这张图，虽然API浏览器几乎都支持了，但是option选项在Safari上直接挂了，于是又打开stackoverflow总结了最终解决方案。3、在使用requestAnimationFrame的时候，经常可以看到大名鼎鼎的requestAnimationFrame，但是一直没有机会使用。这次你可以试试。我们知道requestAnimationFrame的作用是告诉浏览器在下次重绘之前执行传入的回调函数，而这个行为是浏览器自动帮你完成的。于是就有了下面的代码：constscrollToTop=()=>{letsTop=document.documentElement.scrollTop||document.body.scrollTopif(sTop>0){window.requestAnimationFrame(scrollToTop)window.scrollTop(0,sTop-sTop/8)}}完成！！！完美的！！！激动之余，我打开caniusetocheckthecompatibilityofrequestAnimationFrame:chickenatnight！！！
