HTML 錨點定位

admin發表於2018-12-21
HTML

連結<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()一章節。

相關文章