网页中超级简单的锚点编写技巧

其实锚点是啥？看下面的图就知道啦(^_−)☆

我用红笔圈出来的就是所谓的锚点。当用户点击1的时候，就会跳转到下面的地方

那么下面讲解一下如何在自己的网站中制作锚点。

  锚点的作用就是当用户点击了相应的数字，就会跳转到页面底部相应的解释。有点类似于对某件事情的解释说明或者是对某件事情的详细链接等等。那么制作锚点要明白两个思路，一是 锚点放在哪里 ，二是 点击了之后如何跳转到相应的地方

①位置

  在段落中找到需要放置锚点的地方，然后用a标签包住，a标签中的链接地址为要写成“#名字”的形式，最后用sup/sub来设置锚点是上浮还是下浮。

例如：

[1]是用了sup表示的上浮，[2]是用了sub表示的下浮

②跳转

  跳转的地方是结构相似的，所以可以使用 列表ul>li 来设置。li的内容是一个链接，所以用 a标签来包裹 。那么重点来了，为了确保点击和跳转是一一对应的关系，我们需要将跳转处的a标签设置 name值 ，这个值就是上面点击处的地址名字。

例如：

这里的a标签中的name值是1，和上面a中的href值是一一对应的关系。

  如果当你写成我这样的时候，是没有办法实现跳转的，因为1和2在同一个屏幕上，只有当内容足够多时，才会跳转。所以如果想要看跳转的效果，就复制多点1的内容，让当前的页面出现滚动条即可。

1、给锚点文本标签添加id，使用<a href="#"></a>来定位，当单击a链接时，就会跳到id为a01的p标签处；

<div><a href="#a01"></a></div><p>练习</p><p>练习</p><p>练习</p><p>练习</p><p>练习</p><p id="a01">练习</p><p>练习</p>

这样的定位可以针对任何标签来定位。

2、给a标签的文本添加锚点，单击链接可跳到name为a01的a标签处；

<div><a href="#a01"></a></div><p>练习</p><p>练习</p><p>练习</p><p>练习</p><p>练习</p><a name="a01" href=“#”>练习</a><p>练习</p>

使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。

3、使用js。

<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>