HTML A标签实现锚点

最新推荐文章于 2025-10-14 14:22:54 发布

原创最新推荐文章于 2025-10-14 14:22:54 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #前端

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用A标签和JavaScript的scrollIntoView方法来实现网页设计中的锚点功能，通过简单的代码示例展示了如何链接到页面的不同章节。

A标签实现锚点

以前老师教的使用dreamweaver来做网页设计的锚点还是挺简单，点击两下就行，又没有看源码。今天用其他IDE做网页设计需要用到锚点这个功能，查了一下，原来更加简单。直接就是 οnclick="document.getElementById(' ').scrollIntoView()"

<ul class="nav navbar-nav">
<li><a onclick="document.getElementById('frist').scrollIntoView()"></span> 第一章</a></li>
<li><a onclick="document.getElementById('second').scrollIntoView()"></span> 第二章</a></li>
<li><a onclick="document.getElementById('third').scrollIntoView()"></span> 第三章</a></li>
<li><a onclick="document.getElementById('fourth').scrollIntoView()"></span> 第四章</a></li>
<li><a onclick="document.getElementById('fifth').scrollIntoView()"></span> 第五章</a></li>
<li><a onclick="document.getElementById('sixth').scrollIntoView()"></span> 第六章</a></li>
<li><a onclick="document.getElementById('seventh').scrollIntoView()"></span> 第七章</a></li>
<li><a onclick="document.getElementById('eighth').scrollIntoView()"></span> 第八章</a></li>
<li><a onclick="document.getElementById('ninth').scrollIntoView()"></span> 第九章</a></li>
<li><a onclick="document.getElementById('tenth').scrollIntoView()"></span> 第十章</a></li>
<li><a onclick="document.getElementById('eleventh').scrollIntoView()"></span> 第十一章</a></li>
</ul>