HTML 锚点定位

小灰灰 2020-05-15 19:02 833阅读 0赞

# HTML 锚点定位

链接`<a>`是最为常用的HTML元素之一，通过它可以将页面跳转到指定的地址。

利用它非常便利的实现站内或者站际间页面跳转，有利于浏览者获取信息。

首先看一段代码实例：

```html
<a href="http://www.dandelioncloud.cn/do.html">蒲公英云</a>
```

上述代码中，点击蒲公英云可以将页面跳转到蒲公英云下do.html页面。

这是大家都熟知的个功能，其实链接`<a>`除了实现跳转到指定页面，还可能跳转到页面中的指定位置。

通过锚点定位，可以实现跳转到页面中指定位置，首先看一段代码实例：

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title> 
<style type="text/css">
a{
  width:60px;
  height:20px;
  background:#F90;
  font-size:12px;
  text-align:center;
  line-height:20px;
  position:fixed;
  right:0px;
  top:80px;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
#ant{
  width:100%;
  height:50px;
  background:#CCC;
  margin-top:300px;
}
</style>  
</head>  
<body style="height:1400px;">  
<a href="#ant">点击定位</a>
<div id="ant"></div>
</body>  
</html>
```

上述代码点击右侧的黄色按钮可以实现页面内元素定位效果。

代码分析如下：

（1）.通过`<a>`链接设置的是锚点链接。

（2）.将要定位到的div元素就是锚点。

（3）.点击锚点链接会定位到锚点元素。

锚点链接设置规则如下：

（1）.锚点链接`<a>`的href属性值格式是：#+id，id是锚点元素的id属性值。

（2）.设置锚点元素的id属性值，与锚点链接href属性值中的id一致。

如果锚点元素是链接`<a>`元素，那么那么可以使用name属性替代id，但是仅限于链接`<a>`元素。

代码实例如下：

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title> 
<style type="text/css">
#link{
  width:60px;
  height:20px;
  background:#F90;
  font-size:12px;
  text-align:center;
  line-height:20px;
  position:fixed;
  right:0px;
  top:80px;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
a[name=ant]{
  width:100%;
  height:50px;
  display:block;
  background:#CCC;
  margin-top:300px;
}
</style>  
</head>  
<body style="height:1400px;">  
<a id="link" href="#ant">点击定位</a>
<a name="ant"></a>
</body>  
</html>
```

关键代码截图如下：
![](/images/1589636953920.png)

如果锚点元素是链接<a>元素，将它的name属性值设置为锚点链接的href属性值的#后面的部分即可。

上面的代码在同一个页面内的定位，也可以实现不同页面内的定位效果，代码片段如下：

```html
<a id="link" href="do.html#ant">点击定位</a>
```

上述代码，点击链接可以定位到do.html页面id属性值为"ant"的元素处。

或者定位到do.html页面name属性值为"ant"的`<a>`元素处。

前面介绍的，都是HTML锚点定位的最原生态的功能，跳转都是瞬时完成的。

更多的时候，可能需要对效果进行一下修饰，比如实现平滑定位到指定位置。

代码实例如下：

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title> 
<style type="text/css">
#bt {
  width:80px;
  height:22px;
  border:1px solid #ccc;
  border-radius:2px;
}
#ant {
  width:300px;
  height:100px;
  border:1px solid #ccc;
  border-radius:2px;
  margin-top:500px;
}
</style> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
<script>
$(document).ready(function(){
  $('#bt').click(function() {
    $('html,body').animate({
      scrollTop: $("#ant").offset().top - 10
    }, 400);
  });  
})
</script>    
</head>  
<body style="height:1400px;">  
  <div id="bt">点击定位</div>
  <div id="ant">定位到的位置</div>
</body>  
</html>
```

上面代码同样实现了锚点定位效果，并且采用平滑到达的方式。

由于采用的是JavaScript方式，所以锚点链接没必要是`<a>`元素，可以是任意元素，非常灵活。

上述代码的关键在于对jQuery几个方法和属性的理解.