用JavaScript实现每次点击按钮（button）时，页面就会平滑地滚动（scroll）到下一个目标元素（class）的位置

最新推荐文章于 2024-08-04 16:33:59 发布

luwieer

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量755

点赞数 21

文章标签： javascript 开发语言 ecmascript html5

本文链接：https://blog.csdn.net/luwieer/article/details/140281552

版权

引子

最近在练习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方法将当前索引对应的目标元素滚动到视图中。
- 更新索引，以便下次点击时跳转到下一个目标元素。索引使用模运算符%循环重置。

这样，每个按钮点击时会跳转到其对应的目标类元素，并在继续点击时循环跳转到下一个同类元素。

luwieer

关注

21
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
用JavaScript实现每次点击按钮（button）时，页面就会平滑地滚动（scroll）到下一个目标元素（class）的位置

用Javascript实现每次点击Button时，页面平滑滚动到下一个class所在的目标元素的位置。
复制链接

扫一扫