返回顶部 js代码

要在网页中实现“返回顶部”的功能，可以使用JavaScript结合CSS来完成。以下是一个简单的示例代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>返回顶部示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <!-- 这里放置你的页面内容 -->
        <p>滚动页面以查看返回顶部按钮。</p>
        <!-- 重复内容以使页面足够长 -->
        <p>...</p>
    </div>
    <button id="backToTopBtn" class="back-to-top">返回顶部</button>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    font-family: Arial, sans-serif;
}

.content {
    height: 2000px; /* 使页面足够长以便滚动 */
    padding: 20px;
}

.back-to-top {
    display: none; /* 默认隐藏按钮 */
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    z-index: 1000;
}

JavaScript部分（script.js）

document.addEventListener("DOMContentLoaded", function() {
    var backToTopBtn = document.getElementById("backToTopBtn");

    // 当用户滚动页面时，显示或隐藏返回顶部按钮
    window.onscroll = function() { scrollFunction(); };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            backToTopBtn.style.display = "block";
        } else {
            backToTopBtn.style.display = "none";
        }
    }

    // 当用户点击按钮时，平滑滚动到顶部
    backToTopBtn.addEventListener("click", function() {
        document.body.scrollIntoView({ behavior: "smooth" });
    });
});

解释

HTML部分：创建了一个包含大量内容的页面和一个返回顶部按钮。
CSS部分：设置了返回顶部按钮的样式，并默认隐藏它。
JavaScript部分：
- 监听页面滚动事件，当页面滚动超过20像素时显示返回顶部按钮，否则隐藏它。
- 监听返回顶部按钮的点击事件，当按钮被点击时，平滑滚动到页面顶部。