資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery 滾動到特定元素？
jQuery - 一個流行的 JavaScript 庫，用於操作 HTML 文件、處理事件、建立動畫以及執行其他常見的 Web 開發任務。
jQuery 以其簡化 JavaScript 程式設計的能力而聞名，它提供了一種簡單簡潔的語法來選擇和操作 DOM 元素。使用 jQuery，無需編寫複雜的 JavaScript 程式碼來遍歷 DOM 和操作元素，只需幾行程式碼即可完成。
我們有時會在網站上遇到內容較長的頁面，為了跳轉到特定部分，我們需要進行頁面向上或向下滾動。使用 jQuery，此任務可以輕鬆高效地完成。本文介紹如何使用 jQuery 滾動到特定元素。此外，我們還將為每種方法提供示例和語法，以便我們輕鬆選擇最符合我們需求的方法並在我們自己的 Web 專案中實現它。
在 jQuery 中滾動到特定元素的不同方法
可以使用幾種方法來使用 jQuery 滾動到特定元素。我們現在將看到完成此任務的 3 種常用方法。讓我們逐一詳細瞭解它們。
方法 1：使用 scrollTop() 方法
這是使用 jQuery 滾動到特定元素的第一種方法。在這種方法中，scrollTop() 方法用於設定所選元素的垂直捲軸位置，透過將其 scrollTop 屬性設定為元素的頂部位置，可以進一步使用它滾動到特定元素。請參見下面的語法。
語法
以下語法用於滾動到特定元素並將它們動畫化以滾動到具有指定 ID 的元素的頂部位置。
$('html, body').scrollTop($("#divID").offset().top);
示例
在此示例中，建立了一個按鈕，單擊該按鈕會將頁面滾動到指定的區域。在本例中，它將使用 scrollTop() 方法滾動到 ID 為 #divElement 的元素。這裡，offset().top 函式也用於獲取元素的頂部位置。
<html>
<head>
<title>Scrolling to element using scrollTop() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$('html, body').scrollTop($("#divElement").offset().top);
});
});
</script>
<style>
body {
height: 1500px;
}
#divElement {
background-color: green;
height: 100px;
font-size: 40px;
}
</style>
</head>
<body>
<h2>Scrolling to element using scrollTop() method</h2>
<button id="button">Click to Scroll</button>
<div style="padding-top: 500px;"></div>
<div id="divElement">
<p>You have scrolled till here! Good Job.</p>
</div>
</body>
</html>
方法 2：使用 animate() 方法
這是使用 jQuery 滾動到特定元素的第二種方法。在這種方法中，animate() 方法用於在網頁上建立自定義動畫，例如向上或向下滾動。animate() 方法還使用 CSS 樣式將元素從一種狀態更改為另一種狀態。例如，此處 CSS 屬性值會逐漸更改以建立動畫效果。
語法
以下語法用於滾動到特定元素並將它們動畫化以滾動到具有指定 ID 的元素的頂部位置。此處，“1000” 數字是動畫的持續時間（以毫秒為單位），它將確定滾動速度。
$('html, body').animate({
scrollTop: $("#divID").offset().top
}, 1000);
示例
在此示例中，建立了一個按鈕，單擊該按鈕會將頁面滾動到指定的區域。在本例中，它將使用 animate() 方法滾動到 ID 為 #divElement 的元素。這裡，offset().top 函式也用於獲取元素的頂部位置，並且 2000 引數指定動畫的持續時間（以毫秒為單位）。
<html>
<head>
<title>Scrolling to element using animate() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
$('html, body').animate({
scrollTop: $("#divElement").offset().top
}, 1000);
});
});
</script>
<style>
body {
height: 1500px;
}
#divElement {
background-color: green;
height: 100px;
font-size: 40px;
}
</style>
</head>
<body>
<h2>Scrolling to element using animate() method</h2>
<button id="button">Click to Scroll</button>
<div style="padding-top: 500px;"></div>
<div id="divElement">
<p>You have scrolled till here! Good Job.</p>
</div>
</body>
</html>
方法 3：使用 scrollIntoView() 方法
這是使用 jQuery 滾動到特定元素的第三種方法。在這種方法中，我們使用了 scrollIntoView() 方法，它是原生 JavaScript 的一部分。它用於滾動元素的祖先容器，以便呼叫 scrollIntoView() 的元素對使用者可見。
這也用於滾動到特定元素。請參見下面的語法以瞭解更多詳細資訊。
語法
以下語法用於使用 scrollIntoView() 方法滾動到特定元素並將它們動畫化以滾動到具有指定 ID 的元素的頂部位置。
document.getElementById("divID").scrollIntoView();
示例
在此示例中，建立了一個按鈕，單擊該按鈕會將頁面滾動到指定的區域。在本例中，它將使用 animate() 方法滾動到 ID 為 #divElement 的元素。這裡，JavaScript 用於訪問元素並呼叫該方法，同時我們使用 jQuery 來處理按鈕的單擊事件。請注意，這種方法是所有其他方法中最簡單的一種，但某些瀏覽器可能不支援它。
<html>
<head>
<title>Scrolling to element using scrollIntoView() method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
document.getElementById("divElement").scrollIntoView();
});
});
</script>
<style>
body {
height: 1500px;
}
#divElement {
background-color: green;
height: 100px;
font-size: 40px;
}
</style>
</head>
<body>
<h2>Scrolling to element using scrollIntoView() method</h2>
<button id="button">Click to Scroll</button>
<div style="padding-top: 500px;"></div>
<div id="divElement">
<p>You have scrolled till here! Good Job.</p>
</div>
</body>
</html>
結論
在本文中，我們學習瞭如何使用 jQuery 滾動到特定元素。除此之外，我們還學習了可以使用不同方法來使用 jQuery 滾動到特定元素，例如 animate() 方法、scrollTop() 方法或 scrollIntoView() 方法來完成此任務。
透過實現這些技術，開發人員可以在其網站上建立更好的使用者體驗，使使用者更容易導航到網頁的特定部分。總的來說，jQuery 是一個強大的前端開發工具，滾動到特定元素只是使其成為開發人員首選的眾多功能之一。
23K+ 次檢視
