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

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

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 这个网站就用了这个技术,滚动到页面顶部

相关推荐
DoraBigHead15 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三2 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
ningmengjing_2 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript