快捷導(dǎo)航

前端JS/JQ實(shí)現(xiàn)頁面滾動(dòng)控制代碼示例

更新時(shí)間：2025年11月17日 08:22:39 作者：姜太小白

頁面滾動(dòng)可以通過jQuery實(shí)現(xiàn)多種效果,比如自動(dòng)滾動(dòng)、監(jiān)聽滾動(dòng)事件、根據(jù)滾動(dòng)位置改變?cè)貭顟B(tài)等,這篇文章主要介紹了前端JS/JQ實(shí)現(xiàn)頁面滾動(dòng)控制的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

頁面滾動(dòng)條控制實(shí)現(xiàn)

我將創(chuàng)建一個(gè)包含多種滾動(dòng)控制方式的頁面，包括滾動(dòng)到頂部、底部和指定位置的功能。

設(shè)計(jì)思路

創(chuàng)建帶有足夠內(nèi)容的頁面，確保出現(xiàn)滾動(dòng)條
添加固定定位的滾動(dòng)控制按鈕
實(shí)現(xiàn)平滑滾動(dòng)效果
添加滾動(dòng)進(jìn)度指示器
使用現(xiàn)代CSS和少量JavaScript/jQuery

代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>頁面滾動(dòng)控制演示</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(to right, #4b6cb7, #182848);
            color: white;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }
        
        .main-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .sidebar {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }
        
        p {
            margin-bottom: 20px;
            font-size: 1.1rem;
        }
        
        .card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            border-left: 4px solid #4b6cb7;
        }
        
        .card h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .scroll-controls {
            position: fixed;
            right: 30px;
            bottom: 30px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }
        
        .scroll-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #4b6cb7;
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .scroll-btn:hover {
            background: #3a5795;
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        .scroll-btn:active {
            transform: translateY(1px);
        }
        
        .progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: rgba(255, 255, 255, 0.1);
            z-index: 1001;
        }
        
        .progress-bar {
            height: 5px;
            background: linear-gradient(to right, #4b6cb7, #182848);
            width: 0%;
            transition: width 0.1s ease;
        }
        
        .section {
            margin-bottom: 40px;
            padding: 25px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            margin: 20px 0;
        }
        
        footer {
            text-align: center;
            padding: 30px;
            margin-top: 50px;
            background: #2c3e50;
            color: white;
            border-radius: 10px;
        }
        
        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
            
            .scroll-controls {
                right: 15px;
                bottom: 15px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 滾動(dòng)進(jìn)度條 -->
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    
    <div class="container">
        <header>
            <h1>頁面滾動(dòng)控制演示</h1>
            <p class="subtitle">使用JavaScript和jQuery實(shí)現(xiàn)平滑滾動(dòng)到頁面頂部、底部和指定位置</p>
        </header>
        
        <div class="content">
            <div class="main-content">
                <section class="section">
                    <h2>滾動(dòng)控制方法</h2>
                    <div class="card">
                        <h3>滾動(dòng)到頂部</h3>
                        <p>使用JavaScript或jQuery將頁面滾動(dòng)到最頂部。</p>
                        <div class="code-block">
                            // JavaScript方法

                            window.scrollTo({ top: 0, behavior: 'smooth' });


                            
                            // jQuery方法

                            $('html, body').animate({ scrollTop: 0 }, 'slow');
                        </div>
                    </div>
                    
                    <div class="card">
                        <h3>滾動(dòng)到底部</h3>
                        <p>滾動(dòng)到頁面最底部。</p>
                        <div class="code-block">
                            // JavaScript方法

                            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });


                            
                            // jQuery方法

                            $('html, body').animate({ scrollTop: $(document).height() }, 'slow');
                        </div>
                    </div>
                    
                    <div class="card">
                        <h3>滾動(dòng)到指定元素</h3>
                        <p>滾動(dòng)到頁面中的特定元素位置。</p>
                        <div class="code-block">
                            // JavaScript方法

                            document.getElementById('elementId').scrollIntoView({ behavior: 'smooth' });


                            
                            // jQuery方法

                            $('html, body').animate({ scrollTop: $('#elementId').offset().top }, 'slow');
                        </div>
                    </div>
                </section>
                
                <section class="section">
                    <h2>滾動(dòng)事件監(jiān)聽</h2>
                    <p>通過監(jiān)聽滾動(dòng)事件，我們可以實(shí)現(xiàn)各種效果，比如顯示/隱藏返回頂部按鈕、更新進(jìn)度條等。</p>
                    <div class="code-block">
                        // 監(jiān)聽滾動(dòng)事件

                        window.addEventListener('scroll', function() {

                          // 更新進(jìn)度條

                          const winScroll = document.body.scrollTop || document.documentElement.scrollTop;

                          const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

                          const scrolled = (winScroll / height) * 100;

                          document.getElementById("progressBar").style.width = scrolled + "%";

                        });
                    </div>
                </section>
                
                <section class="section" id="targetSection">
                    <h2>目標(biāo)區(qū)域</h2>
                    <p>這是一個(gè)目標(biāo)區(qū)域，你可以使用"滾動(dòng)到此處"按鈕直接滾動(dòng)到這里。</p>
                    <p>頁面滾動(dòng)是網(wǎng)頁設(shè)計(jì)中常見的交互方式，良好的滾動(dòng)體驗(yàn)可以提升用戶滿意度。</p>
                    <p>平滑滾動(dòng)效果通過CSS的scroll-behavior屬性或JavaScript的scrollTo方法實(shí)現(xiàn)。</p>
                </section>
                
                <section class="section">
                    <h2>更多內(nèi)容區(qū)域</h2>
                    <p>這部分內(nèi)容是為了增加頁面高度，確保出現(xiàn)滾動(dòng)條。</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </section>
                
                <section class="section">
                    <h2>JavaScript與jQuery對(duì)比</h2>
                    <p>在現(xiàn)代Web開發(fā)中，原生JavaScript已經(jīng)能夠?qū)崿F(xiàn)大部分jQuery的功能。然而，jQuery仍然因其簡(jiǎn)潔的語法和良好的兼容性而被廣泛使用。</p>
                    <p>對(duì)于簡(jiǎn)單的滾動(dòng)操作，兩者都能很好地完成任務(wù)。選擇使用哪種取決于項(xiàng)目需求和個(gè)人偏好。</p>
                </section>
            </div>
            
            <div class="sidebar">
                <h2>滾動(dòng)控制選項(xiàng)</h2>
                <div class="card">
                    <h3>立即體驗(yàn)</h3>
                    <p>嘗試使用右側(cè)的滾動(dòng)控制按鈕，體驗(yàn)不同的滾動(dòng)效果。</p>
                    <p>按鈕包括：</p>
                    <ul style="padding-left: 20px; margin-top: 10px;">
                        <li>滾動(dòng)到頂部</li>
                        <li>滾動(dòng)到底部</li>
                        <li>滾動(dòng)到目標(biāo)區(qū)域</li>
                    </ul>
                </div>
                
                <div class="card">
                    <h3>滾動(dòng)行為</h3>
                    <p>現(xiàn)代瀏覽器支持平滑滾動(dòng)行為，可以通過CSS屬性控制：</p>
                    <div class="code-block" style="font-size: 0.9rem;">
                        html {

                          scroll-behavior: smooth;

                        }
                    </div>
                    <p>或者通過JavaScript的scrollTo方法實(shí)現(xiàn)：</p>
                    <div class="code-block" style="font-size: 0.9rem;">
                        window.scrollTo({

                          top: 0,

                          behavior: 'smooth'

                        });
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>頁面滾動(dòng)控制演示 &copy; 2023 - 使用JavaScript和jQuery實(shí)現(xiàn)</p>
        </footer>
    </div>
    
    <!-- 滾動(dòng)控制按鈕 -->
    <div class="scroll-controls">
        <button class="scroll-btn" id="scrollTop" title="滾動(dòng)到頂部">↑</button>
        <button class="scroll-btn" id="scrollToTarget" title="滾動(dòng)到目標(biāo)區(qū)域">?</button>
        <button class="scroll-btn" id="scrollBottom" title="滾動(dòng)到底部">↓</button>
    </div>

    <script>
        $(document).ready(function() {
            // 滾動(dòng)到頂部
            $('#scrollTop').click(function() {
                $('html, body').animate({ scrollTop: 0 }, 800);
            });
            
            // 滾動(dòng)到底部
            $('#scrollBottom').click(function() {
                $('html, body').animate({ scrollTop: $(document).height() }, 800);
            });
            
            // 滾動(dòng)到目標(biāo)區(qū)域
            $('#scrollToTarget').click(function() {
                $('html, body').animate({ scrollTop: $('#targetSection').offset().top - 20 }, 800);
            });
            
            // 更新進(jìn)度條
            $(window).scroll(function() {
                const winScroll = $(window).scrollTop();
                const height = $(document).height() - $(window).height();
                const scrolled = (winScroll / height) * 100;
                $('#progressBar').css('width', scrolled + '%');
            });
        });
    </script>
</body>
</html>

功能說明

滾動(dòng)控制按鈕：
- 向上箭頭：滾動(dòng)到頁面頂部
- 圓點(diǎn)：滾動(dòng)到目標(biāo)區(qū)域
- 向下箭頭：滾動(dòng)到頁面底部
滾動(dòng)進(jìn)度條：
- 頁面頂部有一個(gè)進(jìn)度條，顯示當(dāng)前滾動(dòng)位置
代碼示例：
- 展示了使用JavaScript和jQuery實(shí)現(xiàn)滾動(dòng)控制的不同方法
響應(yīng)式設(shè)計(jì)：
- 頁面布局適應(yīng)不同屏幕尺寸