jQuery導航頁面定位詳解

admin發表於2017-10-27
jQuery

分享一段程式碼例項，它實現了點選導航實現頁面定位效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}
.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
}
.nav {
  width: 1000px;
  margin: 0 auto;
  height: 40px;
}
ul li {
  float: left;
  width: 200px;
  background: #87CEEB;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
.one {
  width: 1000px;
  height: 650px;
  margin: 0 auto;
  background: #0000FF;
  text-align: center;
  line-height: 650px;
}
.two {
  width: 1000px;
  height: 650px;
  margin: 0 auto;
  background: #f00;
  text-align: center;
  line-height: 650px;
}
.three {
  width: 1000px;
  height: 650px;
  margin: 0 auto;
  background: #FF6600;
  text-align: center;
  line-height: 650px;
}
.four {
  width: 1000px;
  height: 650px;
  margin: 0 auto;
  background: #000;
  text-align: center;
  line-height: 650px;
}
.five {
  width: 1000px;
  height: 650px;
  margin: 0 auto;
  background: #008000;
  text-align: center;
  line-height: 650px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  var oLi = $(".nav>ul>li");
  for (var index = 0; index < oLi.length; index++) {
    $(oLi[index]).attr("class", "menu" + index)
  }
  $(".nav>ul>li").on("click", function () {
    var obj = $(this).attr("class");
    $("html,body").animate({
      "scrollTop": $("#" + obj).offset().top
    }, 500)
  })
})
  
</script>
</head>
<body>
  <div class="header">
    <nav class="nav">
      <ul>
        <li>螞蟻部落一</li>
        <li>螞蟻部落二</li>
        <li>螞蟻部落三</li>
        <li>螞蟻部落四</li>
        <li>螞蟻部落五</li>
      </ul>
    </nav>
  </div>
  <div class="one" id="menu0">導航一的內容</div>
  <div class="two" id="menu1">導航二的內容</div>
  <div class="three" id="menu2">導航三的內容</div>
  <div class="four" id="menu3">導航四的內容</div>
  <div class="five" id="menu4">導航五的內容</div>
  <div style="height: 300px;"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var oLi = $(".nav>ul>li")，獲取導航欄li元素集合。

（3）.for (var index = 0; index < oLi.length; index++) {

  $(oLi[index]).attr("class", "menu" + index)

}，通過for迴圈為每一個裡元素新增class屬性。

（4）.$(".nav>ul>li").on("click",function(){}）,為導航li元素註冊click事件處理函式。

（5）. var obj = $(this).attr("class"),獲取當前點選li元素的class屬性值。

（6）.$("html,body").animate({

  "scrollTop": $("#" + obj).offset().top

}, 500)，以動畫方式設定元素的向上滾動的距離。

這個距離是對應元素距離document的尺寸。

二.相關閱讀:

（1）.attr()可以參閱jQuery attr()一章節。

（2）.on()可以參閱jQuery on()一章節。

（3）.animate()可以參閱jQuery animate()一章節。

（4）.offset()可以參閱jQuery offset()一章節。

相關文章