jQuery點選平滑跳轉到頁面指定位置

admin發表於2018-05-24
原文網址 : https://www.softwhy.com/article-8067-1.html
jQuery

大家一定遇到過網頁中可能有這樣的效果，當點選網頁中一個連結時候能夠平滑的定位到網頁的指定位置，當然使用錨點可以實現此功能，但過渡不平滑，下面通過程式碼例項介紹一下如何以動畫方式平滑的實現此功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul, li{list-style:none}
body{
  line-height:1.5;
  font-size:12px
}
a:link, a:visited{
  color:#0099FF;
  text-decoration:none
}
a:hover{text-decoration:underline}
.main{
  width:980px;
  margin:0 auto
}
#menu li{
  float:left;
  width:200px;
  margin-right:1px;
  border:1px solid #990000;
  line-height:20px;
  font-size:1em;
  text-align:center
}
#menu li a{
  display:block;
  width:200px;
  height:20px;
  text-decoration:none
}
#menu a:link, #menu a:visited{
  background:#990033;
  color:#FFFFCC
}
#menu a:hover, #menu a:active{
  background:#FF0000;
  color:#fff
}
fieldset{
  clear:both;
}
.box{
  height:300px;
  padding:10px;
  position:relative
}
.box span{
  position:absolute;
  left:20px;
  bottom:10px
}
.filler{
  height:400px;
  width:1px;
  background:#ccc;
  overflow:hidden;
  clear:both
}
.vertical{
  width:5000px;
  border:1px solid #ccc;
  height:80px;
  padding:10px
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$.fn.anchorGoWhere = function(options){
  var obj =this;
  var defaults = {target:0, timer:1000};
  var o = $.extend(defaults,options);
  obj.each(function(index){
    $(obj[index]).click(function(){
      var _rel = $(this).attr("href").substr(1);
      switch(o.target){
        case 1: 
          var _targetTop = $("#"+_rel).offset().top;
          $("html,body").animate({scrollTop:_targetTop},o.timer);
          break;
        case 2:
          var _targetLeft = $("#"+_rel).offset().left;
          $("html,body").animate({scrollLeft:_targetLeft},o.timer);
          break;
      }
      return false;
    });                  
  });
};
$(document).ready(function(){
  $(".goTop").anchorGoWhere({target:1});
  $(".goDown").anchorGoWhere({target:1});
  $(".goNext").anchorGoWhere({target:1});
  $(".goFront").anchorGoWhere({target:1});
  $(".goVertical").anchorGoWhere({target:2});
});
</script>
</head>
<body id="body">
<div class="main">
  <ul id="menu">
    <li><a href="#menu1" class="goDown">選單一</a></li>
    <li><a href="#menu2" class="goDown">選單二</a></li>
    <li><a href="#menu3" class="goDown">選單三</a></li>
    <li><a href="#menu4" class="goDown">選單四</a></li>
  </ul>
  <div class="filler"></div>
  <fieldset>
    <legend id="menu1">選單一的內容</legend>
    <div class="box"></div>
  </fieldset>
  <div class="filler"></div>
  <fieldset>
    <legend id="menu2">選單二的內容</a></legend>
    <div class="box"></div>
  </fieldset>
  <div class="filler"></div>
  <fieldset>
    <legend id="menu3">選單三的內容</legend>
    <div class="box"></div>
  </fieldset>
  <div class="filler"></div>
  <fieldset>
    <legend id="menu4">選單四的內容</a></legend>
    <div class="box"></div>
  </fieldset>
</div>
</body>
</html>

點選導航欄選單可以實現網頁內部的平滑定位效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$.fn.anchorGoWhere=function(options){}，為jquery物件例項新增函式，引數options會傳遞一個物件直接量作為引數。

（2）.var obj=$(this)，宣告一個obj，儲存jquery物件，這裡的this是指向一個jquery物件，不要認為只要是this就是指向dom物件。

（3）.var defaults={target:0,timer:1000}，定義物件直接量，用來作為預設的一些引數，target:0表示不進行定位，timer:1000表示一秒。

（4）.var o=$.extend(defaults,options)，使用引數options擴充套件物件defaults，在本例中其實修改第一個引數target。

（5）.this.each(function(i){})，遍歷jquery物件中的每一個元素，這裡也就是連結。

（6）.$(obj).click(function(){})，為每一個連結註冊click事件處理函式。

（7）.var _rel=$(this).attr("href").substr(1)，擷取字串，比如"#menu1"就被擷取為"menu1"。

（8）.switch(o.target){}，一個switch語句。

（9）.case 1，如果o.target的值是1。

（10）.var _targetTop=$("#"+_rel).offset().top，獲取匹配的legend元素距離文件頂部的距離。

（11）.$("html,body").animate({scrollTop:_targetTop},o.timer)，使用動畫方式設定滾動條的垂直偏移量，值是_targetTop，這樣就會平滑的定位到匹配元素位置。

（12）.return false，取消連結的預設動作，這裡的作用就是取消錨點定位效果。

二.相關閱讀:

（1）.$.extend()參閱$.extend()函式用法詳解一章節。

（2）.$.fn參閱jQuery.fn 作用是什麼一章節。 

（3）.each()參閱jQuery each()方法一章節。

（4）.attr()參閱jQuery attr()方法一章節。 

（5）.substr()參閱javascript substr()方法一章節。  

（6）.offset()參閱jQuery offset()一章節。 

（7）.switch語句參閱javascript switch語句一章節。 

相關文章