• 时间:
  • 分类: 网站

没问题！这是非常常见的需求。

通常来说，“回到页首”按钮有一个交互逻辑：当用户位于页面顶部时，该按钮隐藏；只有当用户向下滚动一段距离后，它才会出现。

以下是包含「回到页首」、「跳到中间」、「回到页尾」三个功能的完整代码。

完整代码（包含 CSS、HTML、JS）

你可以直接将其覆盖放入 footer.php 的 </body> 之前。

<!-- 悬浮按钮容器 -->
<div id="floating-actions">
    <!-- 默认隐藏 class="hidden"，只有滚动后才显示 -->
    <button id="btn-top" class="hidden" title="回到页首">↑</button>
    <button id="btn-middle" title="跳到中间">∥</button>
    <button id="btn-bottom" title="回到页尾">↓</button>
</div>

<!-- 样式与脚本 -->
<style>
    /* 按钮容器样式 */
    #floating-actions {
        position: fixed;
        right: 20px;
        bottom: 100px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 9999;
    }

    /* 单个按钮通用样式 */
    #floating-actions button {
        width: 40px;
        height: 40px;
        background-color: #333;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 18px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 鼠标悬停效果 */
    #floating-actions button:hover {
        background-color: #007bff;
        transform: translateY(-2px); /* 微微上浮 */
    }

    /* 隐藏状态的样式（透明度为0，不可点击） */
    #floating-actions button.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const btnTop = document.getElementById('btn-top');
        const btnMiddle = document.getElementById('btn-middle');
        const btnBottom = document.getElementById('btn-bottom');

        // 1. 功能：回到页首
        if(btnTop) {
            btnTop.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }

        // 2. 功能：跳到中间 (页面高度的一半)
        if(btnMiddle) {
            btnMiddle.addEventListener('click', function() {
                const halfHeight = document.body.scrollHeight / 2;
                window.scrollTo({
                    top: halfHeight,
                    behavior: 'smooth'
                });
            });
        }

        // 3. 功能：回到页尾
        if(btnBottom) {
            btnBottom.addEventListener('click', function() {
                window.scrollTo({
                    top: document.body.scrollHeight,
                    behavior: 'smooth'
                });
            });
        }

        // 4. 逻辑：监听滚动，控制“回到页首”按钮的显示/隐藏
        window.addEventListener('scroll', function() {
            // 当滚动超过 300px 时显示回到页首按钮，否则隐藏
            if (window.scrollY > 300) {
                btnTop.classList.remove('hidden');
            } else {
                btnTop.classList.add('hidden');
            }
        });
    });
</script>

主要改动点说明

  1. HTML 结构：

    • 增加了 <button id="btn-top" ...>。
    • 给该按钮默认加上了 class="hidden"，这样刚打开网页时它是看不见的。

  2. CSS 样式：

    • 增加了 .hidden 类的定义：使用 opacity: 0 和 visibility: hidden 实现隐形，并配合 pointer-events: none 防止隐藏时被误触。

  3. JavaScript 逻辑：

    • 增加了 btnTop 的点击事件，将页面滚动到 top: 0。
    • 核心监听：增加了 window.addEventListener('scroll', ...)。这是一个事件监听器，它会实时监测你的滚动位置。
    • 判断条件：if (window.scrollY > 300) 意味着：当页面向下滚动的距离超过 300 像素时，移除 hidden 类，显示按钮；一旦回到顶部，重新添加 hidden 类隐藏按钮。

你可以把 > 300 这个数值改大或改小，控制按钮出现的灵敏度。
（来自GLM bigmodel.cn)

标签: none