scrollIntoView()实现简单的锚点定位

综述

锚点定位是一个再熟悉不过的操作了，通常会用a标签href=#XX去实现，不过这样做，有一个问题，就是页面会有刷新感，而且地址栏会有变化，F5刷新，则#XXX还是显示在地址栏里，这样如果要进一步进行有关地址栏url的操作，就不得不再做些判断，所以寻找一些新的方法。

如果要求不是很高，scrollIntoView()这个方法就可以取代传统锚点定位，它是利用滚动原理，来将相应的元素滚动到可是区域内。接下来看看详细的介绍。

首先需要说明的是，这个方法并没有写入标准，但是大多数主流浏览器已经支持或部分支持其功能了，所以可以放心使用，当然如果有朝一日标准出来了，那就按标准来吧。

其次要说明的是，这是js原生方法，jquery等框架是使用不了的，所以，获得元素的方法一定是document.getElementById或querySelector，然后才可以点出来scrollIntoView()方法。

官方参数

参数介绍：直接上官方说法（/zh-CN/docs/Web/API/Element/scrollIntoView）

element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions可选

一个带有选项的object：

{behavior: "auto" | "instant" | "smooth",block: "start" | "end",}

behavior可选

定义缓动动画，"auto","instant",或"smooth"之一。默认为"auto"。

block可选

"start","center","end",或"nearest"之一。默认为"center"。

inline可选

"start","center","end",或"nearest"之一。默认为"nearest"。

使用介绍

看起来文邹邹，没关系，下面就简单明了的说明一下各种参数使用：

1. 页面一定要能滚动，这个方法才会生效，否则，你让我如何给你滚动呢？

2. 然后就看代码吧：

//这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方（有兼容性问题）document.querySelector("#title-part").scrollIntoView({block: 'end',behavior: 'smooth' })//这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方（有兼容性问题）document.querySelector("#article-part").scrollIntoView({block: 'start',behavior: 'smooth'})//这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方（无滚动动画效果）document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写//这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方（无滚动动画效果）document.querySelector("#titleMU-part").scrollIntoView(false)

3. 看了上面的代码，基本的用法就已经完全了解了，至于其他参数值，我没有试过，不过好像也用不上，需要的就是滚动效果，并且有些浏览器也不支持，所以就不研究了，这里还要说明的是，元素是否滚动到底部或顶部，还受制于页面布局的限制，如果页面已经到头，那相应元素也可能就停在半中腰的位置了；

4.说完了使用，最后就是兼容性了。前面已经提到了，这个方法没有入标准，但是大多数主流浏览器已经支持其基本功能，也就是说，使用true，false两个参数，来实现木讷的定位（没有滚动动画）是没有任何问题的，但是加入options参数时，就不得不说一句，IE各种版本会直接忽略，全部看成true参数属性，如果想看到滚动动画，就只有火狐和chrome。最后附上官方的浏览器兼容性图表，结束文章，欢迎大家指正！不胜感激！