html中锚点的使用

html中锚点用来在页面中做个标记（mark），可以跳转到对应的标记处。当一个页面很长的时候可以根据html的主题在html中做标记（锚点）。

如何使用锚点呢？

1、做标记 2、触发标记

做标记

通过给你个html 标签加name 和 id。

<a name="001" id="001" ></a>

触发标记

通过 a 标签进行触发 href的值要跟name \ i d 一致，前面必须加 “#”

<a href="#001">跳到001</a>

 

引申

当然对于一篇博客类文章，根据段落加上锚点，然后根据锚点抽出目录目录索引来，已经能够应付大多数的场景。但是在真正的项目中。不说加#在url中影响美观，生硬的页面跳转更是影响体验。为了实现锚点的功能。前端通常模拟锚点来控制页面的定位。

同样是两个部分。

1、做标记： 同样可以在标签上加上id name 也好 自定义的标签属性也好，怎么开心怎么来。当然要考虑到触发标记是怎么找到我们做标记的标签。

2、抽出目标索引： 根据我们的需要制作一个索引

3、索引与标记进行关联

        点击索引跳转对应的页面

             我们可以通过首先找到我们需要跳转的标签。使用 element.scrollIntoView()  进行跳转。当然根据我们的喜好可以加一下过渡。

       滚动页面匹配到对应的索引进行高亮

            给页面天加个滚动监听的事件，滚动触发事件计算页面的位置

 

相关链接

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scroll

https://www.runoob.com/jsref/event-onscroll.html