A标签实现网页锚点-优快云博客

本文链接：https://blog.youkuaiyun.com/xiao_zeng_code/article/details/94325859

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>