首页 > 作文

详解三种方式实现平滑滚动页面到顶部的功能

更新时间:2023-04-03 03:32:59 阅读: 评论:0

背景

最近开发公司的公众号h5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollto(0太阳能汽车痴心不改, 0),一行代码完成。但是诚信伴我行作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求,实现 平滑滚动页面到顶部 的功能。经过调研和查看文档,有了以下三种方案。

1.使用css

完成功能的最高境界,只用css就搞定。代码如下:

html {    scroll-behavior: smooth;}

该样式的作用是为有滚动条的元素指定一个滚动的行为,但是只有在当用户手动导航或者 cssom scrolling api触发滚动的时候生效,不影响用户行为产生的滚动。就在我庆祝的时候,打开can i u看了下兼容性:

狗,还是老老实实用js实现吧。

2.使用window.scrollto api

我们都知道window.scrollto(x, y),通过传入文档中的x,y轴坐标来实现滚动到页面某个位置的功能。这个api其实还可以传入一个opt春天皮肤过敏ion,是一个对象,left值对应坐标中的x,top对应坐标中的y,还有一个值为behavior,可以让你自定义滚动行为,然后我们这样来实现滚动到顶部:

window.scrollto({    left: 0,    top: 0,    behavior: 'smooth'})

真香,搞定。过了几天,产品经理扛着5米大刀来找我,说在safari上滚动效果奇怪,体检极差。于是我默默打开了mdn文档,滚动到底部:

看到了这张图,虽然api浏览器都几乎支持,但是option选项在safari上直接挂掉,于是我又打开了stackoverflow,总结了终极方案。

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)    }}

done!!!perfect!!!雀跃的同时,我还是打开了can i u查看了requestanimationframe的兼容性:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。

本文发布于:2023-04-03 03:32:58,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/6ae2d80e19843c8cb6b9f92a2aec4fae.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:详解三种方式实现平滑滚动页面到顶部的功能.doc

本文 PDF 下载地址:详解三种方式实现平滑滚动页面到顶部的功能.pdf

标签:功能   坐标   看了   浏览器
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图