您的位置:首页> 前端教程> HTML教程
文章导航

HTML 锚点定位

2018-12-21 13:44| 作者: admin| 查看: 4070| 评论: 0|来自: 蚂蚁部落

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

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

关于链接<a>的更多内容参阅如下两篇文章:

(1).HTML <a> 标签一章节。

(2).CSS 设置链接样式一章节。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码
<a href="http://www.softwhy.com/do.html">蚂蚁部落</a>

上述代码中,点击蚂蚁部落可以将页面跳转到蚂蚁部落下do.html页面。

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

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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.softwhy.com/" /> 
<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>

关键代码截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/21/134533no3nhuuoolhhkwwh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果锚点元素是链接<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.softwhy.com/" /> 
<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几个方法和属性的理解,本文不再进行介绍,更多内容参阅相关阅读。

相关阅读:

(1).animate方法参阅jQuery animate()一章节。

(2).offset方法参阅jQuery offset()一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML form 元素下一篇:dl,dt,dd 描述列表

最新评论

返回顶部