Javascript 目录效果实现方式
目录效果是我们在浏览网页时常常会遇到的一个功能，它可以帮助我们快速地浏览并跳转到页面的不同部分。今天我们就来探讨一下如何通过 Javascript 的实现方式来设计一个带有目录效果的网页布局。
这里我们使用 HTML/CSS/JavaScript 进行实现。首先，我们需要在 HTML 文档中创建一个目录列表，并且为每一个标题添加 a 标签，该标签的 href 属性指向对应标题的 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>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变化时，跳转到相应的标题部分
window.addEventListener('hashchange', function() {
var target = document.querySelector(location.hash);
if(target) {
window.scrollTo(0, getRectTop(target));
}
});
// 监听目录项的点击事件，跳转到相应的内容部分
navList.forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
// 移除所有目录项的激活状态
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');
}
});
});
// 监听滚动事件，设置目录项的激活状态
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;
}
}
});