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

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

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

相关推荐
我是若尘7 分钟前
Webpack 入门到实战 - 复习强化版
前端
晓131311 分钟前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三12 分钟前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z21 分钟前
uniapp使用video实现沉浸式在线课程学习平台
前端
灋✘逞_兇39 分钟前
Node.Js是什么?
服务器·javascript·node.js
当牛作馬1 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw01 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖1 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
小飞悟2 小时前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试