这篇文章主要介绍“html5中实现平滑滚动效果的方法有哪些”，在日常操作中，相信很多人在html5中实现平滑滚动效果的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5中实现平滑滚动效果的方法有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
1.使用CSS
完成功能的最高境界，只用CSS就搞定。代码如下：
html {
scroll-behavior: smooth;
}该样式的作用是为有滚动条的元素指定一个滚动的行为，但是只有在当用户手动导航或者 CSSOM scrolling API触发滚动的时候生效，不影响用户行为产生的滚动。
2.使用Window.scrollTo API
我们都知道window.scrollTo(x, y)，通过传入文档中的x，y轴坐标来实现滚动到页面某个位置的功能。这个API其实还可以传入一个option，是一个对象，left值对应坐标中的x，top对应坐标中的y，还有一个值为behavior，可以让你自定义滚动行为，然后我们这样来实现滚动到顶部:
window.scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
})3.使用requestAnimationFrame
经常能看到大名鼎鼎的requestAnimationFrame，但是没机会用上，这次可以尝尝鲜了。我们知道requestAnimationFrame的作用就是告诉浏览器在下次重绘之前执行传入的回调函数，这个行为是浏览器自动帮你做的。于是有了如下代码:
const scrollToTop = () => {
let scrollTop = document.documentElement.scrollTo || document.body.scrollTop
if (scrollTop > 0) {
window.requestAnimationFrame(scrollTop)
window.scrollTop(0, scrollTop - scrollTo / 8)
}
}到此，关于“html5中实现平滑滚动效果的方法有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
