如何在我的網站中實現錨連結的平滑滾動？

透過平滑滾動增強錨連結導航

平滑滾動可以顯著改善使用錨連結瀏覽網頁時的使用者體驗。透過消除不和諧的跳躍並提供無縫過渡，您可以增強頁面的可訪問性和整體美觀。

使用本機 JavaScript

主要瀏覽器的最新版本現在支援錨連結的本機平滑滾動。您可以使用以下程式碼實現此功能：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

jQuery 解決方案

對於較舊的瀏覽器相容性，jQuery 提供了可靠的解決方案：

$(document).on('click', 'a[href^="#"]', event => {
  event.preventDefault();
  $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500);
});

處理目標元素沒有ID

如果目標元素缺少ID但透過名稱鏈接，請使用以下內容程式碼：

$('a[href^="#"]').click(function () {
  $('html, body').animate({ scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top }, 500);
  return false;
});

效能最佳化

為了效率，建議快取$('html, body')選擇器：

var $root = $('html, body');

$('a[href^="#"]').click(function () {
  $root.animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500);
  return false;
});

更新URL

要在捲動動畫期間更新URL，請在回調：

var $root = $('html, body');

$('a[href^="#"]').click(function() {
  var href = $.attr(this, 'href');
  $root.animate({ scrollTop: $(href).offset().top }, 500, () => { window.location.hash = href; });
  return false;
});

透過結合這些技術，您可以為網站使用者提供無縫且引人入勝的導航體驗，使瀏覽頁面內容成為一種樂趣。

以上是如何在我的網站中實現錨連結的平滑滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！