摘要：如果做内部系统，交互要求又不高，这个现在已经是我的首选了，希望大家多多使用
前言
在处理页面内平滑滚动我们使用的方案无外乎以下几种
使用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现在已经是我的首选了，希望大家多多使用~~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95936.html
摘要：默认值为，表示立刻滚到底即表示平滑滚动。这时对锚点内链触发的视口滚动同样有效。它接受两种形式的值布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动老版的浏览器。表示行内元素排列方向要滚动到的位置。 经常有这样的需求：点击一个链接（内链）跳转到当前页面中间某个部分。对于这样的需求，很容易想到使用锚点实现。但有一个问题：滚动一步到位，太生硬了。 我还是比较喜欢平滑滚动。HTML5 中提...
摘要：那什么是锚点问题呢锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。这是标签提供给我们的锚点解决方式。滚动条缓慢滚动到此为止，一个完整的锚点缓慢滚动就完成了，快去试试吧 showImg(https://segmentfault.com/img/bVbslYF);最近项目中遇到传统的锚点问题。那什么是锚点问题呢？ 锚点 是网页...
摘要：那什么是锚点问题呢锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。这是标签提供给我们的锚点解决方式。滚动条缓慢滚动到此为止，一个完整的锚点缓慢滚动就完成了，快去试试吧 showImg(https://segmentfault.com/img/bVbslYF);最近项目中遇到传统的锚点问题。那什么是锚点问题呢？ 锚点 是网页...
摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。 前言 在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...
摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。 前言 在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...
阅读 2396·2021-10-18 13:33
阅读 757·2019-08-30 14:20
阅读 2480·2019-08-30 13:14
阅读 2365·2019-08-29 18:38
阅读 2766·2019-08-29 16:44
阅读 1068·2019-08-29 15:23
阅读 3259·2019-08-29 13:28
阅读 1810·2019-08-28 18:00
