jQuery 錨點平滑滾動 在網頁中，經常會使用錨點鏈接來快速跳轉到頁面內的特定位置。但是默認的錨點跳轉會突然跳轉到目標位置，對于用戶體驗來說并不友好。而使用 jQuery 實現錨點平滑滾動則可以使網頁更加流暢美觀。 實現思路： 在點擊錨點鏈接時，獲取目標元素相對于文檔頂部的距離，然后通過設置 HTML 滾動條的 scrollTop 屬性來實現平滑滾動。具體來說，我們可以使用 animate() 方法來實現滾動效果。 代碼實現： HTML:

<nav><ul><li><a href="#section1">Section 1</a></li><li><a href="#section2">Section 2</a></li><li><a href="#section3">Section 3</a></li></ul></nav><section id="section1"><h2>Section 1</h2><p>這里是內容...</p></section><section id="section2"><h2>Section 2</h2><p>這里是內容...</p></section><section id="section3"><h2>Section 3</h2><p>這里是內容...</p></section>

jQuery:

$('nav a').click(function (event) {
event.preventDefault(); // 阻止默認行為
var target = $(this.hash);
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
});

解析： 當點擊 nav 中的 a 標簽時，會執行對應的 click 事件。為了避免默認行為，我們需要使用 preventDefault() 方法阻止鏈接的跳轉。然后通過 this.hash 獲取目標元素的 id，使用 $(...) 方法獲取目標元素，并使用 animate() 方法實現平滑滾動。 scrollTop 是滾動條的垂直偏移量，$(this.hash).offset().top 為目標元素距離文檔頂部的距離。我們將目標元素滾動到屏幕最頂部，就是將 scrollTop 設置為目標元素距離頂部的距離。 參考資料： - jQuery .animate() 方法 - jQuery 中文文檔 - jQuery .scrollTop() 方法 - jQuery 中文文檔