如何用JavaScript实现一个长尾词关键词的电梯导航功能？

本文共计1334个文字，预计阅读时间需要6分钟。

目录 + 预览效果 + 主要的js代码 + 整体代码 + 预览效果 + 前置css + 使用 + scroll-behavior 和 锚点 + 实现了 + 电梯导航，点击可以查看这篇文章的css实现效果。评论区有人想让我也用js实现一下。

目录

• 预览效果
• 主要的js代码
• 整体代码

预览效果

之前css 利用 scroll-behavior 和 锚点 实现了 电梯导航，点击可以看这篇文章css实现电梯导航的效果。评论区有人想让我用js也实现一下，一开始我起初有点蒙，不知道css和js实现的效果有什么区别。后来我发现了。

css实现的只是单纯点击滑动到指定位置而已。而js实现不仅可以实现点击滑动，而且可以监听滑动事件，让滑动标题高亮，也就是有一个active类

比如我们在这里滑倒了第一块区域的末尾，但是还没滑倒第二块区域，于是滑动标题还只是Section1高亮,当我们滑动到第二块区域时，滑动标题变成了Section2高亮

主要的js代码

主要思路就是对滑动事件进行监听。监听到当前滑动到的位置，然后判断当前所在的位置处于哪一块区域。