还在用锚点做页面内滚动?scrollIntoView让你一步到位!
前言
在处理页面内平滑滚动我们使用的方案无外乎以下几种
- 使用
a标签的href属性
- 使用
location.href
- 使用第三方库
关于1、2点,楼主写了一个例子
http://js.jirengu.com/qevud
缺陷
如果我们使用a标签的href属性
的话:
其一是受限——只能在a标签上使用这一功能
其二是a链接改变了url,这可能会给我们造成一些不必要的麻烦
其三是没有动画效果(这点产品不能忍)
如果我们使用location.href
的话:
比a标签好一点,就是可以使用js控制了,其它大同小异
使用第三方库可以解决以上的问题,不过麻烦呀
下面,隆重介绍一下今天的主人公 ——Element.scrollIntoView()
Element.scrollIntoView()
Element.scrollIntoView()
方法让当前的元素滚动到浏览器窗口的可视区域内具体的介绍大家可以去MDN自行阅读,笔者主要介绍它的参数scrollIntoViewOptions
对象的behavior
属性。
这个属性主要是用来提供动画效果的,其中auto
和instant
都是瞬间到达元素所在位置,但是smooth
提供了一个平滑滚动的动画效果。
实际应用
随随便便撸个什么回到顶部
,回到底部
,回到这回到那
的功能,所以,懂了伐【奸笑脸】
关于兼容性的问题
基本所有浏览器(包括IE8但Opera Mini不行)做到基本跳转是没问题的,不过动画效果支持的就太少了,具体大家可以去caniuse上看。
如果做内部系统,交互要求又不高,这个API现在已经是我的首选了,希望大家多多使用~~相关推荐
wikiwater 2020-10-27
IdeaElements 2020-08-19
Sophiego 2020-08-16
Kakoola 2020-08-01
Kakoola 2020-07-29
ELEMENTS爱乐冬雨 2020-07-18
ELEMENTS爱乐小超 2020-07-04
ELEMENTS爱乐小超 2020-07-04
Kakoola 2020-06-28
Feastaw 2020-06-18
Wmeng0 2020-06-14
ELEMENTS爱乐冬雨 2020-06-14
云之高水之远 2020-06-14
哈喽elements 2020-06-14
Feastaw 2020-06-11