要實現JS錨點(#)在500毫秒內平滑移動效果並且添加70px的偏移以避免內容被上方浮動導覽列遮擋,你可以使用以下程式碼範例:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
const offset = 70; // 設定偏移值
const targetOffset = targetElement.offsetTop - offset;
window.scrollTo({
top: targetOffset,
behavior: 'smooth',
duration: 500 // 設定平滑滾動的時間
});
}
});
});
這段程式碼會攔截所有帶有href
屬性的錨點連結,並在點擊時平滑滾動到對應的目標元素,同時加上了70px的偏移以避免遮擋。你可以將這段程式碼放在你的網頁中的JavaScript部分。