jQuery滚动元素功能示例

已于 2025-06-27 14:59:23 修改
阅读量818 收藏 14
点赞数 17
CC 4.0 BY-SA版权
文章标签： jquery html css
于 2025-05-14 13:36:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147952435

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery滚动元素功能示例</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        
        h1 {
            color: #333;
            text-align: center;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .scroll-container {
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #ddd;
            padding: 15px;
            margin: 20px 0;
            background-color: white;
        }
        
        .content-item {
            padding: 15px;
            margin-bottom: 10px;
            background-color: #e9f7fe;
            border-left: 4px solid #3498db;
        }
        
        .btn-group {
            text-align: center;
            margin: 20px 0;
        }
        
        button {
            padding: 10px 15px;
            margin: 0 5px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        .highlight {
            background-color: #fffacd;
            transition: background-color 0.5s;
        }
        
        /* 响应式设计 */
        @media (max-width: 600px) {
            .container {
                padding: 10px;
            }
            
            button {
                display: block;
                width: 100%;
                margin: 5px 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery滚动元素功能演示</h1>
        
        <p>这个示例演示了如何使用jQuery实现点击按钮滚动到指定元素的功能。</p>
        
        <div class="btn-group">
            <button id="btn-top">滚动到顶部</button>
            <button id="btn-item3">滚动到项目3</button>
            <button id="btn-bottom">滚动到底部</button>
            <button id="btn-next">向下滚动300px</button>
        </div>
        
        <div class="scroll-container" id="scrollContainer">
            <div class="content-item" id="item1">
                <h3>项目1</h3>
                <p>这是第一个内容项目。点击上面的按钮可以滚动到不同位置。</p>
            </div>
            
            <div class="content-item" id="item2">
                <h3>项目2</h3>
                <p>这是第二个内容项目。滚动功能在网页开发中非常常见。</p>
            </div>
            
            <div class="content-item" id="item3">
                <h3>项目3</h3>
                <p>这是第三个内容项目。我们将演示如何滚动到这个位置。</p>
                <p>jQuery的animate()方法可以实现平滑滚动效果。</p>
            </div>
            
            <div class="content-item" id="item4">
                <h3>项目4</h3>
                <p>这是第四个内容项目。继续向下滚动可以看到更多内容。</p>
            </div>
            
            <div class="content-item" id="item5">
                <h3>项目5</h3>
                <p>这是第五个内容项目。接近容器底部了。</p>
            </div>
            
            <div class="content-item" id="item6">
                <h3>项目6</h3>
                <p>这是最后一个内容项目。"滚动到底部"按钮会滚动到这里。</p>
                <p>感谢访问我们的示例页面</p>
            </div>
        </div>
        
        <div class="btn-group">
            <button id="btn-slow">缓慢滚动到项目4</button>
            <button id="btn-highlight">滚动并高亮项目2</button>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 获取滚动容器和各个元素
            const $scrollContainer = $('#scrollContainer');
            const $item3 = $('#item3');
            const $item4 = $('#item4');
            const $item2 = $('#item2');
            
            // 1. 滚动到顶部
            $('#btn-top').click(function() {
                $scrollContainer.animate({
                    scrollTop: 0
                }, 500); // 500毫秒的动画时间
            });
            
            // 2. 滚动到项目3
            $('#btn-item3').click(function() {
                // 计算项目3相对于滚动容器的位置
                const scrollPosition = $item3.offset().top - $scrollContainer.offset().top + $scrollContainer.scrollTop();
                
                $scrollContainer.animate({
                    scrollTop: scrollPosition
                }, 500);
            });
            
            // 3. 滚动到底部
            $('#btn-bottom').click(function() {
                // 滚动高度 = 整个内容高度 - 容器可视高度
                $scrollContainer.animate({
                    scrollTop: $scrollContainer[0].scrollHeight - $scrollContainer.height()
                }, 500);
            });
            
            // 4. 向下滚动300px
            $('#btn-next').click(function() {
                $scrollContainer.animate({
                    scrollTop: $scrollContainer.scrollTop() + 300
                }, 500);
            });
            
            // 5. 缓慢滚动到项目4 (1000毫秒)
            $('#btn-slow').click(function() {
                const scrollPosition = $item4.offset().top - $scrollContainer.offset().top + $scrollContainer.scrollTop();
                
                $scrollContainer.animate({
                    scrollTop: scrollPosition
                }, 1000); // 更慢的动画时间
            });
            
            // 6. 滚动并高亮项目2
            $('#btn-highlight').click(function() {
                const scrollPosition = $item2.offset().top - $scrollContainer.offset().top + $scrollContainer.scrollTop();
                
                $scrollContainer.animate({
                    scrollTop: scrollPosition
                }, 500, function() {
                    // 动画完成后的回调函数
                    $item2.addClass('highlight');
                    
                    // 3秒后移除高亮
                    setTimeout(function() {
                        $item2.removeClass('highlight');
                    }, 3000);
                });
            });
            
            // 添加控制台日志，方便调试
            console.log('页面加载完成，滚动功能已初始化');
        });
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值