# 记 · 滚动条滚动到指定位置(锚点)的不同实现方式
> 滚动到锚点这个老需求，其实有好几种写法：传统 锚记、location.hash、scrollIntoView、window.scrollTo({behavior:'smooth'})、以及自己手写的缓动函数。挨个比较优劣，给出"什么场景用哪个"的速查表。
- URL: https://tenggouwa.com/posts/scroll-to-anchor/
- 发布: 2019-05-08
- 标签: 浏览器, 滚动, 锚点
最近项目中遇到传统的锚点问题。那什么是锚点问题呢？
锚点 是网页制作中超级链接的一种，又叫[命名锚记][2]。命名锚记像一个迅速[定位器][3]一样是一种页面内的超级链接，运用相当普遍。并且可以对网站内容通过菜单进行快速定位。
上图所示为锚点示意图，那这种需求我们怎么实现呢？下面我就来提供一些在不同场景下，可以使用的锚点方式。
**1.first blood**
在传统开发过程中，我们的锚点都是通过a标签跳转至对应ID的形式进行需求实现的。
Menu1
Menu2
Content1
Content2
这是a标签提供给我们的锚点解决方式。
**2.double kill**
原生js去获取并修改scrollTop
这种情况，我们一般用于固定页面元素的锚点设置，或者设置返回顶部按钮。
```
// 通过element.scrollTop来获取当前元素滚动条高度
// 可以在控制台输出下
document.documentElement.scrollTop ====> number
// 返回一个number类型的内容，是滚动条的高度
// 也可以通过给scrollTop赋值去设置滚动条高度
// 在控制台输出
document.documentElement.scrollTop = 0
// 会发现已经滚动的滚动条，滚动到页面最顶端。
```
在js的世界里，浏览器的兼容性总是让人那么头疼
Safari中使用的是 window.pageYOffset
IE中是 document.body.scrollTop 以及 document.documentElement.scrollTop；
所以考虑到浏览器兼容性问题，最后总结出一句完美兼容的代码。
```
// 获取滚动条高度兼容性写法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
```
**3.triple kill**
Element.scrollIntoView()
这个方法在MDN上的解释是实验中的功能，但是亲测主流浏览器是可用，并且出奇的好用。话不多说，直接上代码。
```
// 将某个元素跳转到浏览器视口的最上方
element.scrollIntoView()
```
语法:
```
// 等同于element.scrollIntoView(true)
element.scrollIntoView();
// Boolean型参数
// true 元素的顶端将和其所在滚动区的可视区域的顶端对齐 ； false 元素的底端将和其所在滚动区的可视区域的底端对齐
element.scrollIntoView(alignToTop);
// 一个带有选项的object：
// {
// behavior: "auto"(默认) | "instant" | "smooth"(缓动),
// block: "start" | "end",
// }
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
```
**4.quadra kill**
目前来讲基本的锚点功能已经实现了，点击menu就会跳转到对应的content
但是看起来还是有些生硬。咻~ 的一下就过去了，所以加个缓动来提升下用户体验吧。
在你需要滚动的div的样式里面加一句。
```scroll-behavior: smooth; // 滚动条缓慢滚动```
**5.penta kill**
到此为止，一个完整的锚点缓慢滚动就完成了，快去试试吧！！！
[1]: /img/bVbslYF
[2]: https://baike.baidu.com/item/%E5%91%BD%E5%90%8D%E9%94%9A%E8%AE%B0/7589624
[3]: https://baike.baidu.com/item/%E5%AE%9A%E4%BD%8D%E5%99%A8/4805231
[4]: /img/bVbslXV