不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。
早在第二期,我们就介绍了链接元素,那么这一期我们就来说说页面中的锚点。
如何设置页面锚点
这在活动类的页面上最常用,整个页面可能是一个超大的卖场,页面的每一段作为一个“楼层”,类似盖楼的感觉,然后页面的顶部或侧面有一组可以切换的选项,点击就会跳到不同的楼层:
类似图中这种页面,就可以通过锚点来设置。下面我们具体说一下锚点元素。
锚点有两种形式,都可以实现相同的效果,只是标记锚点的方式不同。
第一种:使用 a 元素
使用 a 元素标记锚点的位置,假设你希望某个链接打开后跳到 index_02 的位置,那么就在 index_02 的位置加一个锚点:
然后在同一个文档中使用普通的链接元素,就可以跳到这个位置了:
这种方式的关键点就是,首先用带 name 的 a 确定位置,然后用带 # 的地址跳过去即可。
第二种:使用 id 属性
HTML 元素的 id 属性是可以唯一标识页面元素的,你可以给任何元素加一个 id,然后就可以通过
的方式跳到 id=“a2” 的元素的位置了,这个元素的写法类似这样:
相比之下,这种方式比第一种方式简单得多,也不需要增加多余的元素,建议都使用这种方法。
当然,你还可以用锚点跳到某个网页的指定位置,比如下面的链接就会跳到页面的第二处位置:
http://st.midea.com/act/score/index_pc.html#a2
正常情况下,页面跳到每个锚点时都会自动把当前位置拉到窗口最顶部。
还有一种比较常见的情况,就是页面中靠下的几个锚点,跳过去的时候可能不会自动滚到页面的顶部。
这是因为页面的长度可能已经到头了,页面的底部不会自动拉出空白,锚点被页面底部“拽”住了。
如果感兴趣的话,可以去观察一下百度百科,几乎都是锚点的形式: