我正在参加「掘金日新计划 · 4 月更文挑战」，本文给小伙伴分享一下我们CSS中的小技巧。

前言

一个CSS小技巧，大家好，今天给小伙伴分享一下我们CSS中的小技巧，滚动条滑动。俗称：电梯导航。

我们可以通过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;保存，看一下效果，我们的页面就滚动滑动了起来。

完整代码

电梯导航。一天一个小技巧。一起学前端。

❤️ 谢谢支持

以上便是本次分享的全部内容，希望对你有所帮助^_^

如果你有任何想法和疑问，欢迎留言～一起探讨

点赞收藏不迷路

一天一个CSS小技巧：电梯导航 -- scroll-behavior

前言

功能实现

完整代码

❤️ 谢谢支持