网页自动滑到顶部,滚动到顶部怎么用

　　背景

　　最近，开发公司H5的微信官方账号实现了点击图标滚动到顶部的功能。功能很简单。直接调用window.scrollTo(0，0)，一行代码完成。但是作为一个攻城狮，我怎么能对自己这么低，所以我给自己加了一个要求，实现页面平滑滚动到顶部的功能。经过调查和查阅文件，我们有以下三个方案。

　　1.使用CSS

　　完成最高级的功能，用CSS就搞定了。代码如下：

　　html { scroll-behavior:smooth；}该样式的作用是为带有滚动条的元素指定一个滚动行为，但只在用户手动导航或CSSOM scrolling API触发滚动时生效，不影响用户行为引起的滚动。在我庆祝的时候，我打开了我可以使用看看兼容性：

　　去他妈的狗，还是老老实实用JS实现吧。

　　2.使用Window.scrollTo API

　　我们都知道window.scrollTo(x，y)，它通过传入文档中的x轴和y轴坐标，实现滚动到页面上某个位置的功能。其实这个API也可以传入一个选项，就是一个对象。左边的值对应坐标中的X，上面的值对应坐标中的Y，还有一个值是behavior，允许你自定义滚动行为。然后我们像这样滚动到顶部：

　　Window.scrollto ({left: 0，top: 0，behavior: smooth})好香。完成了。过了几天，产品经理拿着一把5米的大刀来找我，说Safari上的滚动效果很奇怪，体检极差。于是我默默打开MDN文档，滚动到底部：

　　看到这张图后，虽然几乎所有的API浏览器都支持，但是option选项直接挂在Safari上，于是我又打开了stackoverflow，总结出了最终的解决方案。

　　3.使用requestAnimationFrame

　　经常看到著名的requestAnimationFrame，但是没有机会用。这次我可以试试。我们知道requestAnimationFrame的作用是告诉浏览器在下次重绘之前执行传入的回调函数。浏览器会自动为您完成此行为。于是就有了下面这段代码：

　　const scroll totop=()={ let scroll top=document . document element . scroll to document . body . scroll top if(scroll top 0){ window . request animation frame(scroll top)window . scroll top(0，scroll top-scroll to/8)} }完成！完美！与此同时，我打开了我能用来检查兼容性的requestAnimationFrame:

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。