电梯导航也被称为锚点导航，当点击锚点元素时，页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧，类似电梯一样。常见的电梯导航效果如下，比如一些官方文档中:

之前可能会用 getBoundingClientRect() 判断元素是否在视口中来实现类似效果，但现在有更方便的方法了，那就是 IntersectionObserver + scrollIntoView，轻松实现电梯导航.

scrollIntoView() 介绍

scrollIntoView() 方法会滚动元素的父容器，使元素出现在可视区域。默认是立即滚动，没有动画效果.

如果要添加动画效果，可以这么做:

scrollIntoView({
  behavior: 'smooth'  // instant 为立即滚动
})

它还有两个可选参数 block 和 inline.

block 表示元素出现在视口时垂直方向与父容器的对齐方式，inline 表示元素出现在视口时水平方向与父容器的对齐方式.

他们同样都有四个值可选 start、center、end 、nearest。默认为 start,

scrollIntoView({
  behavior: 'smooth',
  block:'center',
  inline:'center',
})

对于 block 。

• start  将元素的顶部和滚动容器的顶部对齐.

• center  将元素的中心和滚动容器的中心垂直对齐.

• end  将元素的底部和滚动容器的底部对齐.

对于 inline 。

• start 将元素的左侧和滚动容器的左侧对齐.

• center  将元素的中心和滚动容器的中心水平对齐.

• end  将元素的右侧和容器的右侧对齐.

而 nearest 不论是垂直方向还是水平方向，只要出现在视口任务就完成了。可以理解为以最小移动量让元素出现在视口，(慵懒移动)。如果元素已经完全出现在视口中，则不会发生变化.

通过下面动图来感受这个变化，下面滚动容器中有四行五列，包含了从字母 A 到 T。点击 出现在视口 的按钮会取三个下拉框的值作为参数来调用 scrollIntoView() 方法.