JS的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()方法。

官方参数

　　参数介绍：直接上官方看api介绍比较清晰（https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView）

使用介绍

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

//这个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)

 

转载于:https://www.cnblogs.com/goloving/p/10215603.html