还在用锚点作页面内滚动?scrollIntoView让你一步到位!

前言

在处理页面内平滑滚动咱们使用的方案无外乎如下几种浏览器

  1. 使用a标签的href属性
  2. 使用location.href
  3. 使用第三方库

关于一、2点,楼主写了一个例子
http://js.jirengu.com/qevud动画

缺陷

若是咱们使用a标签的href属性的话:
其一是受限——只能在a标签上使用这一功能
其二是a连接改变了url,这可能会给咱们形成一些没必要要的麻烦
其三是没有动画效果(这点产品不能忍)url

若是咱们使用location.href的话:
比a标签好一点,就是可使用js控制了,其它大同小异code

使用第三方库能够解决以上的问题,不过麻烦呀对象

下面,隆重介绍一下今天的主人公 —— Element.scrollIntoView()

Element.scrollIntoView()

Element.scrollIntoView()方法让当前的元素滚动到 浏览器窗口的可视区域内

具体的介绍你们能够去MDN自行阅读,笔者主要介绍它的参数scrollIntoViewOptions对象的behavior属性。
这个属性主要是用来提供动画效果的,其中autoinstant都是瞬间到达元素所在位置,可是smooth提供了一个平滑滚动的动画效果。get

实际应用

随随便便撸个什么回到顶部回到底部回到这回到那的功能,因此,懂了伐【奸笑脸】产品

关于兼容性的问题

基本全部浏览器(包括IE8但Opera Mini不行)作到基本跳转是没问题的,不过动画效果支持的就太少了,具体你们能够去caniuse上看io

若是作内部系统,交互要求又不高,这个API如今已是个人首选了,但愿你们多多使用~~
相关文章
相关标签/搜索