我们常用的链接大都是跳转到其他网页的,链接的是外部地址。在一些情况下,由于我们的篇幅过长,用户在查找时是非常麻烦的,而如果我们再往也的首端加入目录,并且点击目录用户可以直接到达网页中目录对应的地址,这在很大程度上提高了查找的效率,这种方法使用锚点定位实现的。下面将介绍锚点定位的实现方法
锚点定位
锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。锚点定位有很多种写法,下面介绍的是使用html写的锚点定位
注:这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。
// 锚点跳转有两种形式:
*1. a标签 + name / href 属性
*2. 使用标签的id属性
html锚点定位的方法:
<a href="#box1">我跳到box1</a>
<a href="#" name="#box2">我跳到box2</a>
<div id="box1"></div>
<div id="box2"></div>
注:div可以换成其他标签
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>啦啦啦</title>
</head>
<body>
<a href="#one"> 1.one</a> <br />
<a href="#two">2.two</a> <br />
<a href="#three">3.three</a> <br />
<h4 id="one">one</h4>
<hr />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
<h4 id="two">two<h4/>
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
<a name="three">three</herf>
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
</body>
</html>
定位到其他页面的锚点定位
如果锚点元素是链接<a>元素,将它的name属性值设置为锚点链接的href属性值的#后面的部分即可。
上面的代码在同一个页面内的定位,也可以实现不同页面内的定位效果,代码片段如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>啦啦啦</title>
</head>
<body>
<a href="./666.html#one"> 1.one</a> <br />
<a href="./666.html#two">2.two</a> <br />
<a href="./666.html#three">3.three</a> <br />
</body>
</html>
666.html页面内容
<DOVTYPE! html>
<html>
<head>
<title>lll</title>
</head>
<body>
<h4 >one</h4>
<hr />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
<h4 id="two">two<h4/>
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
222222<br />
<a>three</a>
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
333333<br />
</body>
</html>