JS的scrollIntoView简单使⽤
  scrollIntoView⽅法滚动当前元素，进⼊浏览器的可见区域
el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);
  该⽅法可以接受⼀个布尔值作为参数。
  如果为true，表⽰元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；
  如果为false，表⽰元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。
  如果没有提供该参数，默认为true。
  锚点定位是⼀个再熟悉不过的操作了，通常会⽤a标签href=#XX去实现，不过这样做，有⼀个问题，就是页⾯会有刷新感，⽽且地址栏会有变化，F5刷新，则#XXX还是显⽰在地址栏⾥，这样如果要进⼀步进⾏有关地址栏url的操作，就不得不再做些判断，所以寻⼀些新的⽅法。如果要求不是很⾼，scrollIntoView()这个⽅法就可以取代传统锚点定位，它是利⽤滚动原理，来将相应的元素滚动到可是区域内。接下来看看详细的介绍。
  ⾸先需要说明的是，这个⽅法并没有写⼊标准，但是⼤多数主流浏览器已经⽀持或部分⽀持其功能了，所以可以放⼼使⽤，当然如果有朝⼀⽇标准出来了，那就按标准来吧。其次要说明的是，这是js原⽣⽅法，jquery等框架是使⽤不了的，所以，获得元素的⽅法⼀定是ElementById或querySelector，然后才可以点出来scrollIntoView()⽅法。
官⽅参数
使⽤介绍
  页⾯⼀定要能滚动，这个⽅法才会⽣效，否则，你让我如何给你滚动呢？
//这个title-part元素将以平滑的滚动⽅式滚动到与视⼝底部齐平地⽅（有兼容性问题）
jquery框架原理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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。