摘要：背景最近开发公司的公众号，做了一个点击滚动到顶部的功能。但是作为一个攻城狮，怎么可能对自己要求这么低，所以我给自己加了个需求，实现平滑滚动页面到顶部的功能。使用我们都知道，通过传入文档中的，轴坐标来实现滚动到页面某个位置的功能。
背景
最近开发公司的公众号H5，做了一个点击icon滚动到顶部的功能。实现功能比较简单，直接调用window.scrollTo(0, 0)，一行代码完成。但是作为一个攻城狮，怎么可能对自己要求这么低，所以我给自己加了个需求，实现平滑滚动页面到顶部的功能。经过调研和查看文档，有了以下三种方案。
1.使用CSS完成功能的最高境界，只用CSS就搞定。代码如下：
html {
scroll-behavior: smooth;
}
该样式的作用是为有滚动条的元素指定一个滚动的行为，但是只有在当用户手动导航或者 CSSOM scrolling API触发滚动的时候生效，不影响用户行为产生的滚动。就在我庆祝的时候，打开can i use看了下兼容性：
日了狗，还是老老实实用JS实现吧。
我们都知道window.scrollTo(x, y)，通过传入文档中的x，y轴坐标来实现滚动到页面某个位置的功能。这个API其实还可以传入一个option，是一个对象，left值对应坐标中的x，top对应坐标中的y，还有一个值为behavior，可以让你自定义滚动行为，然后我们这样来实现滚动到顶部:
window.scrollTo({
left: 0,
top: 0,
behavior: "smooth"
})
真香，搞定。过了几天，产品经理扛着5米大刀来找我，说在Safari上滚动效果奇怪，体检极差。于是我默默打开了MDN文档，滚动到底部：
看到了这张图，虽然API浏览器都几乎支持，但是option选项在Safari上直接挂掉，于是我又打开了stackoverflow，总结了终极方案。
经常能看到大名鼎鼎的requestAnimationFrame，但是没机会用上，这次可以尝尝鲜了。我们知道requestAnimationFrame的作用就是告诉浏览器在下次重绘之前执行传入的回调函数，这个行为是浏览器自动帮你做的。于是有了如下代码:
const scrollToTop = () => {
let sTop = document.documentElement.scrollTop || document.body.scrollTop
if (sTop > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTop(0, sTop - sTop / 8)
}
}
Done！！！Perfect！！！雀跃的同时，我还是打开了can i use查看了requestAnimationFrame的兼容性：
晚上吃鸡！！！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103768.html
摘要：背景最近开发公司的公众号，做了一个点击滚动到顶部的功能。但是作为一个攻城狮，怎么可能对自己要求这么低，所以我给自己加了个需求，实现平滑滚动页面到顶部的功能。使用我们都知道，通过传入文档中的，轴坐标来实现滚动到页面某个位置的功能。 背景 最近开发公司的公众号H5，做了一个点击icon滚动到顶部的功能。实现功能比较简单，直接调用window.scrollTo(0, 0)，一行代码完成。但是...
摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。 前言 在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...
摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。 前言 在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...
摘要：从本人这两个月移动实践的经验来看，微信的里面和的滑动效果无论是在安卓还是下的体验都很一般，有明显的卡顿现象，在安卓下面还会出现滑动过快的时候在页面停下来之后滚动条才闪到相应位置的现象。 前言 在微信里面浏览页面的时候，有一个很管用的方法可以区分这个页面是原生的还是H5形式的。随便打开一个页面，用力往下扯的时候，如果页面上方出现了黑底，黑底上有一行诸如网页由game.weixin.qq....
摘要：平滑滚动到顶部底部指定地方平滑滚动到顶部底部指定地方这部分是产品介绍这部分是产品介绍这部分是产品介绍这部分是产品介绍这部分是产品介绍返回顶部产品介绍滑到底部js平滑滚动到顶部、底部、指定地方 DOCTYPE html> js平滑滚动到顶部、底部、指定地方 .box{ height:200px; width:100%; backgro...
阅读 1711·2021-11-22 12:09
阅读 1451·2019-08-30 13:22
阅读 2082·2019-08-29 17:00
阅读 2634·2019-08-29 16:28
阅读 2945·2019-08-26 13:51
阅读 1174·2019-08-26 13:25
阅读 3236·2019-08-26 12:14
阅读 3006·2019-08-26 12:14
