实现页面上下返回按钮的完整代码，包含HTML、CSS和JavaScript

原创于 2025-08-27 17:38:03 发布 · 303 阅读

CC 4.0 BY-SA版权

以下是实现页面上下返回按钮的完整代码，包含HTML、CSS和JavaScript，满足所有要求：

page_scroll_buttons
功能实现：创建了固定在右下角的圆形返回按钮组，包含上下两个按钮，仅在页面滚动时显示
图片引用：使用外部CDN提供的圆形箭头图标，符合图片格式要求而非图标代码
自适应设计：按钮大小固定但容器采用响应式布局，适应不同屏幕尺寸
交互效果：按钮有悬停放大效果，滚动时平滑显示/隐藏，点击后平滑滚动到顶部/底部
代码注释：关键部分添加了详细注释说明功能实现逻辑


<!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>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            min-height: 200vh; /* 确保页面可滚动 */
            font-family: Arial, sans-serif;
        }
        
        /* 返回按钮容器样式 */
        .scroll-buttons {
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        /* 按钮显示时的样式 */
        .scroll-buttons.visible {
            opacity: 1;
            visibility: visible;
        }
        
        /* 按钮通用样式 */
        .scroll-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: transform 0.2s, background-color 0.2s;
        }
        
        /* 按钮悬停效果 */
        .scroll-btn:hover {
            background-color: rgba(0, 0, 0, 0.9);
            transform: scale(1.05);
        }
        
        /* 按钮图片样式 */
        .scroll-btn img {
            width: 60%;
            height: 60%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <!-- 页面内容占位 -->
    <div style="padding: 20px;">
        <h1>页面内容</h1>
        <p>向下滚动页面查看返回按钮...</p>
    </div>
    
    <!-- 返回按钮容器 -->
    <div class="scroll-buttons">
        <!-- 向上按钮 -->
        <div class="scroll-btn up-btn" title="返回顶部">
            <img src="https://cdn-icons-png.flaticon.com/512/892/892692.png" alt="向上箭头图标">
        </div>
        <!-- 向下按钮 -->
        <div class="scroll-btn down-btn" title="返回底部">
            <img src="https://cdn-icons-png.flaticon.com/512/892/892656.png" alt="向下箭头图标">
        </div>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 获取按钮元素
            const scrollButtons = document.querySelector('.scroll-buttons');
            const upBtn = document.querySelector('.up-btn');
            const downBtn = document.querySelector('.down-btn');
            
            // 滚动事件监听
            window.addEventListener('scroll', function() {
                // 检查滚动位置
                if (window.pageYOffset > 100) {
                    // 显示按钮
                    scrollButtons.classList.add('visible');
                } else {
                    // 隐藏按钮
                    scrollButtons.classList.remove('visible');
                }
            });
            
            // 向上按钮点击事件
            upBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
            
            // 向下按钮点击事件
            downBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: document.body.scrollHeight,
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>