引子
最近在练习JavaScript，想着有没有方案可以在网页上悬浮一个按钮，然后每次一按这个按钮，就可以跳转到网页中有着特定的class的位置去呢？
答案当然是肯定的。
虽然网上绝大部分教程都是教你如何跳转到id的位置，可是id毕竟是唯一性的，如果我想重复点击按钮，依次跳转到同一个位置，那么就没有那么方便了。
以下是我多次尝试之后的结果，供各位有缘之士参考。
正文
下面是一个示例代码，演示了如何通过点击一个按钮跳转到具有相同类名的元素位置，并在继续点击时跳转到下一个具有相同类名的元素位置。
首先，我们需要一些HTML元素，并且要有一个按钮：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Jump to Class Example</title><style>.target {margin: 50px 0;padding: 20px;background-color: lightblue;}</style>
</head>
<body><button id="jumpButton">Jump to Next</button><div class="target">Target 1</div><div class="target">Target 2</div><div class="target">Target 3</div><div class="target">Target 4</div><script>// JavaScript to handle the jumping logicdocument.addEventListener('DOMContentLoaded', (event) => {const button = document.getElementById('jumpButton');const targets = document.querySelectorAll('.target');let currentIndex = 0;button.addEventListener('click', () => {if (targets.length > 0) {targets[currentIndex].scrollIntoView({ behavior: 'smooth' });currentIndex = (currentIndex + 1) % targets.length;}});});</script>
</body>
</html>这个代码做了以下几件事：
- HTML部分:
- 一个按钮用于触发跳转。
- 若干个具有相同类名(.target)的元素。
- CSS部分:
- 简单的样式设置，使目标元素更容易识别。
- JavaScript部分:
- 当页面加载完成后，获取按钮和所有具有.target类的元素。
- 监听按钮的点击事件，每次点击按钮时，调用scrollIntoView方法将当前目标元素滚动到视图中。
- 使用一个currentIndex变量来跟踪当前跳转到的元素索引，并在每次点击后更新索引，以便下次点击时跳转到下一个目标元素。
- 当索引超出目标元素数组长度时，使用模运算符%将索引重置为0，实现循环跳转。
这样，每次点击按钮时，页面就会平滑地滚动到下一个目标元素的位置。
拓展 - 多个按钮跳转多个不同的class位置
有的朋友可能会问，虽然实现了一个按钮的效果，那如果我有多个按钮，代码要如何写呢？
好问题！
我们可以为每个按钮和目标类创建一个映射，利用JavaScript来处理不同按钮和目标类的跳转逻辑。下面是重构后的代码示例，让它清晰的复用给四个button跳转四个不同的class位置。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Jump to Class Example</title><style>.target1, .target2, .target3, .target4 {margin: 50px 0;padding: 20px;background-color: lightblue;}</style>
</head>
<body><button class="jumpButton" data-target-class="target1">Jump to Target 1</button><button class="jumpButton" data-target-class="target2">Jump to Target 2</button><button class="jumpButton" data-target-class="target3">Jump to Target 3</button><button class="jumpButton" data-target-class="target4">Jump to Target 4</button><div class="target1">Target 1</div><div class="target1">Target 1</div><div class="target2">Target 2</div><div class="target2">Target 2</div><div class="target3">Target 3</div><div class="target3">Target 3</div><div class="target4">Target 4</div><div class="target4">Target 4</div><script>document.addEventListener('DOMContentLoaded', () => {const buttons = document.querySelectorAll('.jumpButton');const indices = {};buttons.forEach(button => {const targetClass = button.getAttribute('data-target-class');indices[targetClass] = 0;button.addEventListener('click', () => {const targets = document.querySelectorAll(`.${targetClass}`);if (targets.length > 0) {targets[indices[targetClass]].scrollIntoView({ behavior: 'smooth' });indices[targetClass] = (indices[targetClass] + 1) % targets.length;}});});});</script>
</body>
</html>
代码说明：
-
HTML部分：
-
四个按钮，每个按钮有一个data-target-class属性，用于指定要跳转的目标类。
-
各个目标类元素。
-
CSS部分：
-
简单的样式设置，使不同目标元素更容易识别。
-
JavaScript部分：
-
当页面加载完成后，获取所有带有.jumpButton类的按钮。
-
创建一个indices对象，用于跟踪每个目标类的当前索引。
-
遍历每个按钮，根据data-target-class属性获取目标类，并初始化其索引。
-
为每个按钮添加点击事件监听器：
- 根据目标类名选择目标元素。
- 使用scrollIntoView方法将当前索引对应的目标元素滚动到视图中。
- 更新索引，以便下次点击时跳转到下一个目标元素。索引使用模运算符%循环重置。
这样，每个按钮点击时会跳转到其对应的目标类元素，并在继续点击时循环跳转到下一个同类元素。
