【第012期】如何设置页面锚点

不知道大家有没有注意到，在我们上网的时候，会看到有些链接打开之后可以直接定位到页面的某个位置处。

早在第二期，我们就介绍了链接元素，那么这一期我们就来说说页面中的锚点。

如何设置页面锚点

这在活动类的页面上最常用，整个页面可能是一个超大的卖场，页面的每一段作为一个“楼层”，类似盖楼的感觉，然后页面的顶部或侧面有一组可以切换的选项，点击就会跳到不同的楼层：

类似图中这种页面，就可以通过锚点来设置。下面我们具体说一下锚点元素。

锚点有两种形式，都可以实现相同的效果，只是标记锚点的方式不同。

第一种：使用 a 元素

使用 a 元素标记锚点的位置，假设你希望某个链接打开后跳到 index_02 的位置，那么就在 index_02 的位置加一个锚点：

然后在同一个文档中使用普通的链接元素，就可以跳到这个位置了：

这种方式的关键点就是，首先用带 name 的 a 确定位置，然后用带 # 的地址跳过去即可。

第二种：使用 id 属性

HTML 元素的 id 属性是可以唯一标识页面元素的，你可以给任何元素加一个 id，然后就可以通过

的方式跳到 id=“a2” 的元素的位置了，这个元素的写法类似这样：

相比之下，这种方式比第一种方式简单得多，也不需要增加多余的元素，建议都使用这种方法。

当然，你还可以用锚点跳到某个网页的指定位置，比如下面的链接就会跳到页面的第二处位置：

http://st.midea.com/act/score/index_pc.html#a2

正常情况下，页面跳到每个锚点时都会自动把当前位置拉到窗口最顶部。

还有一种比较常见的情况，就是页面中靠下的几个锚点，跳过去的时候可能不会自动滚到页面的顶部。

这是因为页面的长度可能已经到头了，页面的底部不会自动拉出空白，锚点被页面底部“拽”住了。

如果感兴趣的话，可以去观察一下百度百科，几乎都是锚点的形式：