javascript 目录效果

Javascript 目录效果实现方式目录效果是我们在浏览网页时常常会遇到的一个功能，它可以帮助我们快速地浏览并跳转到页面的不同部分。今天我们就来探讨一下如何通过 Javascript 的实现方式来设计一个带有目录效果的网页布局。这里我们使用 HTML/CSS/JavaScript 进行实现。首先，我们需要在 HTML 文档中创建一个目录列表，并且为每一个标题添加 a 标签，该标签的 href 属性指向对应标题的 id，类似于下面这样：

<div ><ul ><li><a href="">Title 1</a></li><li><a href="">Title 2</a></li><li><a href="">Title 3</a></li><li><a href="">Title 4</a></li><li><a href="">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 编写相应的逻辑代码，实现点击目录项时自动滚动到指定的内容，并在目录项上添加一个激活样式，用于标记当前所在的部分。我们可以通过获取对应标题和目录项的 DOM 节点来实现。具体的代码实现如下：

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;}}});

最后，我们需要添加 CSS 样式来美化目录部分，将其放置在页面的固定位置，使其在页面滚动时始终可见即可。通过设置目录项激活状态的不同样式，还可以让用户更方便地区分当前所在的部分。综上所述，通过上述代码实现方式，我们可以很方便地添加目录效果到我们的页面中。这个功能不仅方便用户快速导航到指定的内容，而且可以增强页面的交互性和美观性，提高用户的使用体验。 免责声明：本文内容来自用户上传并发布，站点仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请核实广告和内容真实性，谨慎使用。