引子
最近在练习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 logic
document.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方法将当前索引对应的目标元素滚动到视图中。
- 更新索引,以便下次点击时跳转到下一个目标元素。索引使用模运算符%循环重置。
这样,每个按钮点击时会跳转到其对应的目标类元素,并在继续点击时循环跳转到下一个同类元素。