JS的scrollIntoView简单使用、及关于scrollIntoViewIfNeeded、scrolIByLines、scroIIByPages方法的使用
一、scrollIntoView简单使用
scrollIntoView方法滚动当前元素，进入浏览器的可见区域
el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);
该方法可以接受一个布尔值作为参数。
如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；
如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。
如果没有提供该参数，默认为true。
锚点定位是一个再熟悉不过的操作了，通常会用a标签href=#XX去实现，不过这样做，有一个问题，就是页面会有刷新感，而且地址栏会有变化，F5刷新，则#XXX还是显示在地址栏里，这样如果要进一步进行有关地址栏url的操作，就不得不再做些判断，所以寻找一些新的方法。如果要求不是很高，scrollIntoView()这个方法就可以取代传统锚点定位，它是利用滚动原理，来将相应的元素滚动到可是区域内。接下来看看详细的介绍。
首先需要说明的是，这个方法并没有写入标准，但是大多数主流浏览器已经支持或部分支持其功能了，所以可以放心使用，当然如果有朝一日标准出来了，那就按标准来吧。其次要说明的是，这是js原生方法，jquery等框架是使用不了的，所以，获得元素的方法一定是document.getElementById或querySelector，然后才可以点出来scrollIntoView()方法。
1、官方参数
参数介绍：直接上官方看api介绍比较清晰（https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView）
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)
二、关于scrollIntoView、scrollIntoViewIfNeeded、scrolIByLines、scroIIByPages方法的使用方法
关于 scrollIntoView()、scrollIntoViewIfNeeded()、scrolIByLines()、scroIIByPages() 方法在实际工作中用得不多，但偶尔也会用到，注重用户体验时，一些细节要做到位，有些不常用的方法也就要用下，DOM规范没有就如何滚动页面区域这个问题作出规定。为此，各种浏览器都实现了相应的方法， 用于以不同方式控制滚动。这些方法都是作为HTMLElement类型的扩展存在的，因此可以在所有元素上使用。
1、scrollIntoView(alignWithTop)：滚动浏览器窗口或容器元素，以便在视口(viewport)中看到当前元素。如果alignWithTop的值为true，或者省略它，那么窗口会尽可能滚动到自身顶部与元素顶部平齐。所有浏览器都实现了这个方法。
2、scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视口中可见，这个方法什么也不做。如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部(垂直方向)。Safari和Chrome实现了这个方法。
如果为true，则元素将在其所在滚动区的可视区域中居中对齐。
如果为false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。
3、scrolIByLines( lineCount)：将元素的内容滚动指定的行数的高度，lineCount值可是正值，也可以是负值。Safari和Chrome实现了这个方法。
4、scroIIByPages (pageCount)：将元素的内容滚动指定的页面的高度，具体高度由元素的高度决定。Safari和Chrome实现了这个方法。
要注意的是，scrollIntoView()和scrollIntoViewIfNeeded()作用的是元素的窗口，而scrolIByLines()和scrolIByPages()影响的则是元素自身。下面是几个示例：
// 将页面主体滚动5行
document.body.scrollByLines(5);
//确保当前元素可见
document.forms[0].scrollIntoView();
//确保只在当前元素不可见的情况下使其可见
document.Images[0].scrollIntoViewIfNeeded();
// 将页面主体往回滚动1页
document.body.scrollByPages(-1);
