Javascript 目錄效果實現(xiàn)方式 目錄效果是我們在瀏覽網(wǎng)頁時常常會遇到的一個功能，它可以幫助我們快速地瀏覽并跳轉(zhuǎn)到頁面的不同部分。今天我們就來探討一下如何通過 Javascript 的實現(xiàn)方式來設計一個帶有目錄效果的網(wǎng)頁布局。 這里我們使用 HTML/CSS/JavaScript 進行實現(xiàn)。首先，我們需要在 HTML 文檔中創(chuàng)建一個目錄列表，并且為每一個標題添加 a 標簽，該標簽的 href 屬性指向?qū)獦祟}的 id，類似于下面這樣：

<div class="nav">
<ul class="nav-list">
<li><a href="#title1">Title 1</a></li>
<li><a href="#title2">Title 2</a></li>
<li><a href="#title3">Title 3</a></li>
<li><a href="#title4">Title 4</a></li>
<li><a href="#title5">Title 5</a></li>
</ul>
</div>
<h2 id="title1"> Title 1 </h2>
<p>This is the content of Title 1</p>
<h2 id="title2"> Title 2 </h2>
<p>This is the content of Title 2</p>
<h2 id="title3"> Title 3 </h2>
<p>This is the content of Title 3</p>
<h2 id="title4"> Title 4 </h2>
<p>This is the content of Title 4</p>
<h2 id="title5"> Title 5 </h2>
<p>This is the content of Title 5</p>

接下來，我們需要用 JavaScript 編寫相應的邏輯代碼，實現(xiàn)點擊目錄項時自動滾動到指定的內(nèi)容，并在目錄項上添加一個激活樣式，用于標記當前所在的部分。我們可以通過獲取對應標題和目錄項的 DOM 節(jié)點來實現(xiàn)。具體的代碼實現(xiàn)如下：

var nav = document.querySelector('.nav');
var navList = nav.querySelectorAll('a');
var contents = document.querySelectorAll('h2');
function getRectTop(elem) {
var rect = elem.getBoundingClientRect();
return rect.top + window.pageYOffset;
}
// 地址欄中的hash變化時，跳轉(zhuǎn)到相應的標題部分
window.addEventListener('hashchange', function() {
var target = document.querySelector(location.hash);
if(target) {
window.scrollTo(0, getRectTop(target));
}
});
// 監(jiān)聽目錄項的點擊事件，跳轉(zhuǎn)到相應的內(nèi)容部分
navList.forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
// 移除所有目錄項的激活狀態(tài)
navList.forEach(function(nav) {
nav.classList.remove('active');
});
item.classList.add('active');
var target = document.querySelector(item.getAttribute('href'));
if(target) {
window.scrollTo(0, getRectTop(target));
window.location.hash = item.getAttribute('href');
}
});
});
// 監(jiān)聽滾動事件，設置目錄項的激活狀態(tài)
window.addEventListener('scroll', function() {
for (var i = contents.length - 1; i >= 0; i--) {
var content = contents[i];
if(getRectTop(content)< window.pageYOffset + 100) {
navList.forEach(function(item) {
item.classList.remove('active');
if('#' + content.id === item.getAttribute('href')) {
item.classList.add('active');
}
});
break;
}
}
});

最后，我們需要添加 CSS 樣式來美化目錄部分，將其放置在頁面的固定位置，使其在頁面滾動時始終可見即可。通過設置目錄項激活狀態(tài)的不同樣式，還可以讓用戶更方便地區(qū)分當前所在的部分。 綜上所述，通過上述代碼實現(xiàn)方式，我們可以很方便地添加目錄效果到我們的頁面中。這個功能不僅方便用戶快速導航到指定的內(nèi)容，而且可以增強頁面的交互性和美觀性，提高用戶的使用體驗。