我们常用的链接大都是跳转到其他网页的，链接的是外部地址。在一些情况下，由于我们的篇幅过长，用户在查找时是非常麻烦的，而如果我们再往也的首端加入目录，并且点击目录用户可以直接到达网页中目录对应的地址，这在很大程度上提高了查找的效率，这种方法使用锚点定位实现的。下面将介绍锚点定位的实现方法
锚点定位
锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。锚点定位有很多种写法，下面介绍的是使用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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
