电梯导航 scroll-behavior

前言

滚动条滑动。俗称：电梯导航。

我们可以通过 scroll-behavior:smooth;来实现滚动条的滑动。文末附代码。

功能实现

我们在京东中会经常看到有一种叫电梯导航的页面效果，点击完之后，页面会滑动的相应的位置，那这个效果，我们不用 JS，通过 CSS，也是完全能够实现的

在这里我已经给小伙伴准备好了一个 demo，大家可以看一下我这写的，页面中通过三个 DIV 实现一个一二三楼盒子，右侧有一个小的侧边栏，分别对应着一二三楼的按钮，他们是通过 a 链接来实现的，那么，我想通过纯 CSS 来实现刚刚演示的电梯导航，那要怎么写呢？

<div>
  <div class="mode1" id="mode1">一楼</div>
  <div class="mode2" id="mode2">二楼</div>
  <div class="mode3" id="mode3">三楼</div>
</div>

html {
  scroll-behavior: smooth;
}

我们可以借助于我们的，锚点链接，第一个 a 链接对于一楼，我想点击完之后，页面会跳转到一楼服饰的小模块当中啊，我们只需要在 a 链接里面写上，它是用#号开头的是锚点，我这里用#mode1 来标记，这样，我们就给这个链接加了一个锚点，那么它要跳到哪去呢？哎，对，它要跳到第一个 div 盒子，那么我们在第一个 div 加上一个 ID，等于 mode1 就可以了，那么锚点链接使用的时候呢，是#后面的名字换成 ID，保证和 ID 相同就可以了，写完之后保存。

<div class="right-mode">
  <a href="#mode1">一楼</a>
  <a href="#mode2">二楼</a>
  <a href="#mode3">三楼</a>
</div>

我们刷新一下，看一下页面效果，现在我们看一下，当我点完一楼，页面瞬时间就跳到了，一楼服饰模块上来了，同样的道理，二楼三楼，写上锚点，以及 ID，保存，就好了，可以直接跳了，但是我们发现，我们刚刚看到京东，点击完之后，它的页面是有一个滑动效果的哎，它是慢慢滑动过去，要想实现这个效果，也非常简单，就是我刚刚说的 css 样式，页面是 HTML，然后呢，我们在 HTML 上加上我们刚刚说的 scroll-behavior: smooth;保存，看一下效果，我们的页面就滚动滑动了起来。

完整代码