实现页面平滑滚动到某个位置

最新推荐文章于 2024-07-29 15:22:05 发布

前端对象

最新推荐文章于 2024-07-29 15:22:05 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zaoqinghuan/article/details/116010628

版权

本文介绍了两种实现页面平滑滚动的方法。一是使用`window.scrollTo()`配合`behavior: 'smooth'`属性，但存在IE和Safari浏览器的兼容性问题。二是利用`requestAnimationFrame`进行递归滚动，适用于所有主流浏览器。第一种方法简洁，第二种方法更可控并能自定义滚动速度。

摘要由CSDN通过智能技术生成

背景：
在一些项目中，在页面的右下角会有一个返回顶部的按钮。点击这个按钮，页面会平滑的滚动到顶部。我们向大家介绍了页面平滑滚动的2种方法。
一、window.scrollTo()
window.scrollTo(x, y) 可以通过传入文档(HTML 中的 document)中的x轴坐标和y轴坐标将页面滚动到某个位置。该 API 还支持传入一个 options 对象，其中left属性等同于x轴坐标；top属性等同于y轴坐标；behavior 属性表示滚动行为，其类型为 String，可选值有 3 个：smooth (平滑滚动 )、instant (瞬间滚动)、auto (默认值)。auto 实测效果等同于 instant 。
window.scrollTo({
left: 0, // x坐标
top: 0, // y 坐标
behavior: ‘smooth’ // 可选值：smooth、instant、auto
})
兼容性问题：所有主要浏览器都支持该 API ，但 IE浏览器和 Safari 浏览器不支持 options 选项
二、requestAnimationFrame方法
几乎所有的主流浏览器都支持 window.requestAnimationFrame，所以不存在兼容性问题。requestAnimationFrame 可以用来实现高级动画，是浏览器用于定时循环操作的一个接口，类似于 setTimeout，主要用途是按帧对网页进行重绘。这个API就是告诉浏览器，希望执行一个动画，让浏览器在下次重绘之前调用指定的回调函数更新动画。
法1、
let timer=null
const backToTop = () => {
const scrollTop =