頁面全屏垂直平滑滾動程式碼例項

antzone發表於2017-04-09

本章節分享一段程式碼例項，它實現了網頁全屏垂直滾動效果。

並且詳細介紹一下它的實現過程，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  margin: 0;
  height: 100%;
  overflow:hidden;
}
#a111 {
  position: fixed;
  width: 1000px;
  left: 10%;
}
#a111 a {
  display: block;
  width: 150px;
  height: 20px;
  background: #000;
  color: #fff;
  float: left;
}
#a111 a:hover {
  background: #f60;
}
#b11 {
  height: 1000px;
  background: #090;
}
#b22 {
  height: 1000px;
  background: #fc0;
}
#b33 {
  height: 1000px;
  background: #09d;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function ($) {
  $.extend($.fn, {
    scrollTo: function (time, to) {
      time = time || 800;
      to = to || 1;
      $('a[href*=#]', this).click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
        && location.hostname == this.hostname) {
          var $target = $(this.hash);
          $target = $target.length && $target || $('[id=' + this.hash.slice(1) + ']');
          if ($target.length) {
            if (to == 1) {
              $('html,body').animate({
                scrollTop: $target.offset().top
              }, time);
            }
            else if (to == 2) {
              $('html,body').animate({
                crollLeft: $target.offset().left
              }, time);
            }
            else {
              alert('argument error');
            }
            return false;
          }
        }
      });
    }
  });
})(jQuery);
 
$(function () {
  $("#a111").scrollTo(700)
});
</script>
</head>
<body>
  <div id="a111">
    <a href="#b11">螞蟻部落一</a>
    <a href="#b22">螞蟻部落二</a>
    <a href="#b33">螞蟻部落三</a>
  </div>
  <div id="b11">頁面一</div>
  <div id="b22">頁面二</div>
  <div id="b33">頁面三</div>
</body>
</html>

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

一.程式碼註釋:

（1）.(function ($) {})(jQuery),匿名自執行函式，傳遞的是jQuery物件。

（2）.$.extend($.fn, {})，擴充套件$.fn物件。

（3）.scrollTo: function (time, to) {}，此方法實現了平滑滾動效果，time規定動畫執行的時間，to表示滾動的方位，如果是1，那麼就是垂直滾動，如果是2，那麼就是水平滾動。

（4）.time = time || 800，如果傳遞了time，那麼就使用傳遞的引數，否則預設值是800毫秒。

（5）.to = to || 1，如果傳遞了to，那麼就用傳遞的引數，否則預設值是1。

（6）.$('a[href*=#]', this).click(function () {})，為href屬性值baohan#的連結a元素註冊click事件處理函式。

（7）.if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname)，location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 是用來判斷是否是當前頁面錨點定位，location.hostname == this.hostname是用來驗證是否是同域。

（8）.var $target = $(this.hash)，獲取連結的錨點部分也就是#和#號的後面的部分。

（9）.$target = $target.length && $target || $('[id=' + this.hash.slice(1) + ']')，判斷是否存在錨點部分，如果存在那麼就獲取和id對應的元素物件。（10）.if ($target.length) {}，如果存在指定物件。

（11）.if (to == 1) {

  $('html,body').animate({

    scrollTop: $target.offset().top

  }, time);

}，進行垂直滾動效果，滾動的尺寸就是指定元素offset().top值。

二.相關閱讀:

（1）.location.pathname可以參閱location.pathname一章節。

（2）.replace()可以參閱正規表示式replace()函式一章節。

（3）.slice()可以參閱javascript slice() 一章節。

（4）.animate()方法可以參閱jQuery animate()一章節。

（5）.offset()方法可以參閱jQuery offset()一章節。

相關文章