前端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)位置改變元素狀態(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對比</h2>
<p>在現(xiàn)代Web開發(fā)中，原生JavaScript已經(jīng)能夠?qū)崿F(xiàn)大部分jQuery的功能。然而，jQuery仍然因其簡潔的語法和良好的兼容性而被廣泛使用。</p>
<p>對于簡單的滾動(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)控制演示 © 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)不同屏幕尺寸
這個(gè)實(shí)現(xiàn)使用了少量jQuery代碼來控制滾動(dòng)，同時(shí)保持了頁面的美觀和功能性。您可以直接復(fù)制這段代碼到HTML文件中運(yùn)行，無需任何外部依賴（除了jQuery庫）。
總結(jié)
到此這篇關(guān)于前端JS/JQ實(shí)現(xiàn)頁面滾動(dòng)控制的文章就介紹到這了,更多相關(guān)JS/JQ頁面滾動(dòng)控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS pushlet XMLAdapter適配器用法案例解析
這篇文章主要介紹了JS pushlet XMLAdapter適配器用法案例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JavaScript實(shí)現(xiàn)word轉(zhuǎn)png的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)word轉(zhuǎn)png的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
javascript中關(guān)于break,continue的特殊用法與介紹
javascript大家所熟知中的for是一個(gè)循環(huán)體，循環(huán)體其中的break和continue也是大家都比較熟悉的功能，相信大家對它們的用法不會(huì)陌生，本文不是介紹其功能，本文假設(shè)你已經(jīng)熟悉break和continue的語意和用法2012-05-05
Three.js后期處理效果(發(fā)光描邊OutlinePass)
這篇文章主要給大家介紹了關(guān)于Three.js后期處理效果(發(fā)光描邊OutlinePass)的相關(guān)資料,Three js 開發(fā)的一些知識(shí)整理,方便后期遇到類似的問題,能夠及時(shí)查閱使用,需要的朋友可以參考下2024-01-01
JavaScript實(shí)現(xiàn)隨機(jī)數(shù)生成器（去重）
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)數(shù)生成器，生成不重復(fù)的隨機(jī)數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
關(guān)于JS中的apply,call,bind的深入解析
下面小編就為大家?guī)硪黄P(guān)于JS中的apply,call,bind的深入解析。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-04
JavaScript展開運(yùn)算符用法及實(shí)際應(yīng)用詳解
展開運(yùn)算符是JavaScript中的語法糖,用三個(gè)點(diǎn)(...)表示,廣泛應(yīng)用于數(shù)組和對象的操作,本文介紹了其基本用法,如在數(shù)組和對象中的應(yīng)用,合并數(shù)組或?qū)ο?更新對象屬性等,還探討了展開運(yùn)算符的高級(jí)應(yīng)用,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了js Date()日期函數(shù)瀏覽器兼容問題解決方法,需要的朋友可以參考下2017-09-09
跟我學(xué)習(xí)javascript的函數(shù)和函數(shù)表達(dá)式
跟我學(xué)習(xí)javascript的函數(shù)和函數(shù)表達(dá)式，詳細(xì)介紹了函數(shù)表達(dá)式、命名函數(shù)表達(dá)式的方法，感興趣的小伙伴們可以參考一下2015-11-11
javascript保留兩位小數(shù)的實(shí)現(xiàn)方法你了解嗎
這篇文章主要為大家介紹了javascript保留兩位小數(shù)的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01