JavaScript 頁內導航
在網頁中，我們經常需要使用頁內導航來快速跳轉頁面上的不同部分。JavaScript 作為一種強大的腳本語言，在實現頁內導航方面有著很好的表現。本文將介紹如何使用 JavaScript 實現頁內導航。
一、基本實現方法
實現頁內導航最基本的方法是使用錨點。在 HTML 中，我們可以通過 a 標簽來創建錨點，并在 href 屬性中指定跳轉的目標位置。比如下面的代碼創建了一個跳轉到 id 屬性為 section2 的元素。
通過設置不同元素的 id 屬性來創建不同的錨點，然后使用標簽的 href 屬性來跳轉到相應的錨點。這樣就完成了最基本的頁內導航效果。
二、滾動效果
基本效果雖然已經很不錯了，但如果想要有更流暢的使用體驗，我們可以添加滾動效果。當用戶點擊鏈接時，頁面將流暢地滾動到相應的目標處。使用 JavaScript 實現這個效果還是比較容易的。
通過查詢所有帶有 href 屬性的 a 標簽，并為它們添加點擊事件，當用戶點擊鏈接時，首先阻止默認的點擊事件，接下來以動畫形式滾動到目標位置。
三、固定導航條
隨著頁面滾動，導航條可能會消失在用戶的視野之外，為此，我們可以將導航條固定在頁面某個位置。使用以下代碼，可以實現頁面滾動時導航條的固定效果。
首先，獲取導航條元素并設置它的 offsetTop 值，將其固定在頁面頂部。在滾動事件中，當頁面滾動的距離達到導航條的 offsetTop 值時，將其設置為固定狀態。
四、路徑高亮
在導航條中，通常會高亮顯示當前頁面所在的路徑部分。例如，在一個網站的文檔頁面中，可以高亮顯示當前所在的章節。使用 JavaScript，可以實現該效果。
當用戶點擊鏈接時，先滾動到目標位置，然后調用 setActiveLink() 函數來設置當前路徑高亮。
在 setActiveLink() 函數中，首先獲取所有帶有 href 屬性的 a 標簽，并移除 class 為 active 的樣式。接下來，使用 querySelector() 函數查找到當前目標的 a 標簽，使用類名 active 為它添加樣式。
五、整合效果
考慮到在實際開發中，我們需要同時使用上述方法才能實現一個完整的頁內導航，因此，我們將它們合并在一起完成一個整合效果。
其中，header 代表導航條元素，類名為 sticky 的樣式用于固定導航條，類名為 active 的樣式用于高亮當前路徑。
六、總結
頁內導航是網頁開發中常用的一種功能。通過使用 JavaScript，我們可以實現頁面滾動，固定導航條和當前路徑高亮等效果，提升用戶的使用體驗。同時，JS 中的 DOM 操作和事件處理也展示了它的強大和靈活性。
在網頁中，我們經常需要使用頁內導航來快速跳轉頁面上的不同部分。JavaScript 作為一種強大的腳本語言，在實現頁內導航方面有著很好的表現。本文將介紹如何使用 JavaScript 實現頁內導航。
一、基本實現方法
實現頁內導航最基本的方法是使用錨點。在 HTML 中，我們可以通過 a 標簽來創建錨點，并在 href 屬性中指定跳轉的目標位置。比如下面的代碼創建了一個跳轉到 id 屬性為 section2 的元素。
<a href="#section2">跳轉到第二節</a> <br> <h2 id="section2">第二節</h2>
通過設置不同元素的 id 屬性來創建不同的錨點，然后使用標簽的 href 屬性來跳轉到相應的錨點。這樣就完成了最基本的頁內導航效果。
二、滾動效果
基本效果雖然已經很不錯了，但如果想要有更流暢的使用體驗，我們可以添加滾動效果。當用戶點擊鏈接時，頁面將流暢地滾動到相應的目標處。使用 JavaScript 實現這個效果還是比較容易的。
// 獲取所有帶有 href 屬性的 a 標簽，并添加點擊事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault(); // 阻止默認點擊事件
document.querySelector(this.getAttribute('href')).scrollIntoView({ // 以動畫形式滾動到目標位置
behavior: 'smooth',
});
});
});通過查詢所有帶有 href 屬性的 a 標簽，并為它們添加點擊事件，當用戶點擊鏈接時，首先阻止默認的點擊事件，接下來以動畫形式滾動到目標位置。
三、固定導航條
隨著頁面滾動，導航條可能會消失在用戶的視野之外，為此，我們可以將導航條固定在頁面某個位置。使用以下代碼，可以實現頁面滾動時導航條的固定效果。
window.onscroll = function () {
myFunction()
};
<br>
var navbar = document.getElementById("navbar");
<br>
var sticky = navbar.offsetTop;
<br>
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}首先，獲取導航條元素并設置它的 offsetTop 值，將其固定在頁面頂部。在滾動事件中，當頁面滾動的距離達到導航條的 offsetTop 值時，將其設置為固定狀態。
四、路徑高亮
在導航條中，通常會高亮顯示當前頁面所在的路徑部分。例如，在一個網站的文檔頁面中，可以高亮顯示當前所在的章節。使用 JavaScript，可以實現該效果。
// 獲取所有帶有 href 屬性的 a 標簽，并添加點擊事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault(); // 阻止默認點擊事件
document.querySelector(this.getAttribute('href')).scrollIntoView({ // 以動畫形式滾動到目標位置
behavior: 'smooth',
});
setActiveLink(this.getAttribute('href')); // 設置當前路徑高亮
});
});
<br>
function setActiveLink(hash) {
var links = document.querySelectorAll('a[href^="#"]');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
document.querySelector('a[href="' + hash + '"]').classList.add("active");
}當用戶點擊鏈接時，先滾動到目標位置，然后調用 setActiveLink() 函數來設置當前路徑高亮。
在 setActiveLink() 函數中，首先獲取所有帶有 href 屬性的 a 標簽，并移除 class 為 active 的樣式。接下來，使用 querySelector() 函數查找到當前目標的 a 標簽，使用類名 active 為它添加樣式。
五、整合效果
考慮到在實際開發中，我們需要同時使用上述方法才能實現一個完整的頁內導航，因此，我們將它們合并在一起完成一個整合效果。
window.onscroll = function () {
myFunction()
};
<br>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth',
});
setActiveLink(this.getAttribute('href'));
});
});
<br>
var header = document.getElementById("header");
var sticky = header.offsetTop;
<br>
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}
<br>
function setActiveLink(hash) {
var links = document.querySelectorAll('a[href^="#"]');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
document.querySelector('a[href="' + hash + '"]').classList.add("active");
}其中，header 代表導航條元素，類名為 sticky 的樣式用于固定導航條，類名為 active 的樣式用于高亮當前路徑。
六、總結
頁內導航是網頁開發中常用的一種功能。通過使用 JavaScript，我們可以實現頁面滾動，固定導航條和當前路徑高亮等效果，提升用戶的使用體驗。同時，JS 中的 DOM 操作和事件處理也展示了它的強大和靈活性。