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


Posted in HTML / CSS onApril 23, 2019

背景

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

1.使用CSS

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

html {
    scroll-behavior: smooth;
}

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

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

日了狗,还是老老实实用JS实现吧。

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

真香,搞定。过了几天,产品经理扛着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 use查看了requestAnimationFrame的兼容性:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
利用HTML5的新特点实现图片文件异步上传
May 29 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 #HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 #HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 #HTML / CSS
html5唤醒APP小记
Mar 27 #HTML / CSS
html5录音功能实战示例
Mar 25 #HTML / CSS
浅析HTML5中的download属性使用
Mar 13 #HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 #HTML / CSS
You might like
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
Javascript 继承实现例子
2009/08/12 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
考试不及格检讨书
2014/01/09 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
招聘专员岗位职责
2014/03/07 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
办公用品质量保证书
2015/05/11 职场文书
胡桃夹子观后感
2015/06/11 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Python字典和列表性能之间的比较
2021/06/07 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python