大家好，我是考100分的小小码 ，祝大家学习进步，加薪顺利呀。今天说一说css实现电梯导航「终于解决」,希望您对编程的造诣更进一步.
css实现电梯导航
啥叫电梯导航呢？
直接上图
当我们点击左边的小导航栏的时候，页面会自动滑动到我们所要看到部分。也许你可能猜到了实现这样的主要关键点，就是锚点。让我们接着看。
京东(JD.COM) 官网，大家可以自己尝试一下看一下效果。
平常大多数人都会使用js语法进行控件绑定，然后实现其相对效果，可是在css中也可以做到。
命名[锚点]的作用：在同一页面内的不同位置进行跳转。
通俗理解：可以通过锚点跳转到页面中的其他位置，当页面过长时，可以将页面分为几部分，通过顶部设置一些锚点，点击可以方便浏览者快速定位到相应的位置。
使用语法
1)给元素定义命名锚记名
语法：
<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法：
<a href="#命名锚记名称"></a>
注意
- href属性的属性值最前面要加**#**（href=”#id名）
- 在要跳转到的位置的标签中添加的是id属性
可是单纯只是用锚点并没有那种滑动的效果，锚点是直接跳转到指定的位置，并不会有动作。那么怎么用css实现自动滑动呢？
css电梯滑动实现
scroll-behavior
在HTML中有这样一个属性。 scroll-behavior 属性规定当用户单击可滚动框中的链接时，是否平滑地（具动画效果）滚动位置，而不是直线跳转。
scroll-behavior: auto|smooth|initial|inherit;
| 值 | 描述 |
|---|---|
| auto | 默认值。允许在滚动框内的元素间直接跳转的“滚动效果”。 |
| smooth | 允许在滚动框内的元素间平滑的“滚动效果”。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
开始实现效果
因为码上掘金的大与页面不一致，所以我相对按照它设置了大小，使得效果明显。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
转载请注明出处: https://daima100.com/13570.html
