快捷導(dǎo)航

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

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

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

頁面滾動條控制實現(xiàn)

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

設(shè)計思路

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

代碼實現(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>頁面滾動控制演示</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>
    <!-- 滾動進度條 -->
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    
    <div class="container">
        <header>
            <h1>頁面滾動控制演示</h1>
            <p class="subtitle">使用JavaScript和jQuery實現(xiàn)平滑滾動到頁面頂部、底部和指定位置</p>
        </header>
        
        <div class="content">
            <div class="main-content">
                <section class="section">
                    <h2>滾動控制方法</h2>
                    <div class="card">
                        <h3>滾動到頂部</h3>
                        <p>使用JavaScript或jQuery將頁面滾動到最頂部。</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>滾動到底部</h3>
                        <p>滾動到頁面最底部。</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>滾動到指定元素</h3>
                        <p>滾動到頁面中的特定元素位置。</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>滾動事件監(jiān)聽</h2>
                    <p>通過監(jiān)聽滾動事件，我們可以實現(xiàn)各種效果，比如顯示/隱藏返回頂部按鈕、更新進度條等。</p>
                    <div class="code-block">
                        // 監(jiān)聽滾動事件

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

                          // 更新進度條

                          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>這是一個目標(biāo)區(qū)域，你可以使用"滾動到此處"按鈕直接滾動到這里。</p>
                    <p>頁面滾動是網(wǎng)頁設(shè)計中常見的交互方式，良好的滾動體驗可以提升用戶滿意度。</p>
                    <p>平滑滾動效果通過CSS的scroll-behavior屬性或JavaScript的scrollTo方法實現(xiàn)。</p>
                </section>
                
                <section class="section">
                    <h2>更多內(nèi)容區(qū)域</h2>
                    <p>這部分內(nèi)容是為了增加頁面高度，確保出現(xiàn)滾動條。</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對比</h2>
                    <p>在現(xiàn)代Web開發(fā)中，原生JavaScript已經(jīng)能夠?qū)崿F(xiàn)大部分jQuery的功能。然而，jQuery仍然因其簡潔的語法和良好的兼容性而被廣泛使用。</p>
                    <p>對于簡單的滾動操作，兩者都能很好地完成任務(wù)。選擇使用哪種取決于項目需求和個人偏好。</p>
                </section>
            </div>
            
            <div class="sidebar">
                <h2>滾動控制選項</h2>
                <div class="card">
                    <h3>立即體驗</h3>
                    <p>嘗試使用右側(cè)的滾動控制按鈕，體驗不同的滾動效果。</p>
                    <p>按鈕包括：</p>
                    <ul style="padding-left: 20px; margin-top: 10px;">
                        <li>滾動到頂部</li>
                        <li>滾動到底部</li>
                        <li>滾動到目標(biāo)區(qū)域</li>
                    </ul>
                </div>
                
                <div class="card">
                    <h3>滾動行為</h3>
                    <p>現(xiàn)代瀏覽器支持平滑滾動行為，可以通過CSS屬性控制：</p>
                    <div class="code-block" style="font-size: 0.9rem;">
                        html {

                          scroll-behavior: smooth;

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

                          top: 0,

                          behavior: 'smooth'

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

    <script>
        $(document).ready(function() {
            // 滾動到頂部
            $('#scrollTop').click(function() {
                $('html, body').animate({ scrollTop: 0 }, 800);
            });
            
            // 滾動到底部
            $('#scrollBottom').click(function() {
                $('html, body').animate({ scrollTop: $(document).height() }, 800);
            });
            
            // 滾動到目標(biāo)區(qū)域
            $('#scrollToTarget').click(function() {
                $('html, body').animate({ scrollTop: $('#targetSection').offset().top - 20 }, 800);
            });
            
            // 更新進度條
            $(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>