学习笔记——跳转锚点

有时，点击选项卡或者边栏时，不跳转页面，而是滚动到某一标签特定的位置。这是我们需要用到跳转锚点这一功能。

---

一。方法一：

主要通过a标签的#和目标标签的id值来确定跳转位置 

        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#js">JS</a>
        
        <h2 id="html">HTML超文本标记语言</h2>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <h2 id="css">CSS层叠样式表</h2>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <h2 id="js">JS脚本</h2>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>

点击CSS链接，滚动条滚动到以下位置：

 二。方法二：

主要通过a标签的#和目标标签的name值来确定跳转位置 

        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#js">JS</a>
        
        <a name="html"></a>
        <h2>HTML超文本标记语言</h2>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <a name="css"></a>
        <h2>CSS层叠样式表</h2>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <a name="js"></a>
        <h2>JS脚本</h2>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>
        <p>模拟段落</p>

点击js链接，跳转到以下位置：