如何给网页增加滚动到顶部的功能

若想为网页添加滚动到顶部的功能，可按以下步骤操作：

1. 创建滚动按钮

先在 HTML 里添加一个用于触发滚动的按钮，代码如下：

html

预览

复制代码

<button id="scrollToTopBtn" title="返回顶部">↑</button>

2. 设计按钮样式

接着使用 CSS 为这个按钮设计样式，让它固定在页面右下角，示例样式如下：

css

复制代码

#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: none; /* 默认隐藏按钮 */
    z-index: 999;
}

#scrollToTopBtn:hover {
    background-color: #0056b3;
}

3. 编写 JavaScript 逻辑

最后用 JavaScript 实现按钮的显示、隐藏以及滚动功能：

javascript

复制代码

document.addEventListener('DOMContentLoaded', function() {
    const scrollToTopBtn = document.getElementById('scrollToTopBtn');

    // 监听滚动事件
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) { // 当页面滚动超过300像素时显示按钮
            scrollToTopBtn.style.display = 'block';
        } else {
            scrollToTopBtn.style.display = 'none';
        }
    });

    // 点击按钮时平滑滚动到顶部
    scrollToTopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 平滑滚动效果
        });
    });
});

完整示例

下面是一个整合了上述代码的完整示例：

html

预览

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动到顶部示例</title>
    <style>
        body {
            height: 2000px; /* 增加页面高度以便测试滚动 */
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        #scrollToTopBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 20px;
            cursor: pointer;
            display: none;
            z-index: 999;
        }

        #scrollToTopBtn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>滚动到顶部示例</h1>
    <p>滚动页面查看效果...</p>

    <button id="scrollToTopBtn" title="返回顶部">↑</button>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const scrollToTopBtn = document.getElementById('scrollToTopBtn');

            window.addEventListener('scroll', function() {
                if (window.scrollY > 300) {
                    scrollToTopBtn.style.display = 'block';
                } else {
                    scrollToTopBtn.style.display = 'none';
                }
            });

            scrollToTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>

Kindergarten sight words - Kindergarten Sight Words 这个网站就用了这个技术，滚动到页面顶部