頁面中的平滑滾動——smooth-scroll.js的使用

正常的本頁面錨連接跳轉的時候跟PPT似的，特別生硬，用戶體驗很是差。

這時候咱們就能夠藉助smooth-scroll.js這個插件，來實現本頁面的平滑的跳轉。

1首先，導入必須的JS文件

 <script src="js/jquery-1.10.2.js"></script>
 <script src="js/jquery.smooth-scroll.min.js"></script>
 <script src="js/jquery.ba-bbq.js"></script>

2咱們能夠這樣來調用插件

$('a').smoothScroll({});

3能夠根據本身的須要指定一個外部容器，那麼滾動就是在這個(#container)容器內發生，而不是在頁面級別發生了

$('#container a').smoothScroll();

4咱們能夠能夠經過下面的方式來排除指定容器的包含元素

$('#container a').smoothScroll({
     excludeWithin: ['.container2']
});

5經過下面的語句來排除知足指定條件的元素

$('a').smoothScroll({
    exclude: ['.rough','#chunky']
});

6調整滑動到哪一個位置就中止

$('.backtotop').smoothScroll({
   offset: -100
});

7設定一個滑動開始以前的回調函數

$('a').smoothScroll({
   beforeScroll: function() {
      alert('ready to go!'); 
    }
});

8設定一個滑動結束的回調函數

 $('a').smoothScroll({
  afterScroll: function() {
     alert('we made it!'); 
  }
});

你也能夠本身配置參數

 $.smoothScroll({
  //滑動到的位置的偏移量
  offset: 0,
  //滑動的方向，可取 'top' 或 'left'
  direction: 'top',
  // 只有當你想重寫默認行爲的時候纔會用到
  scrollTarget: null,
  // 滑動開始前的回調函數。`this` 表明正在被滾動的元素
  beforeScroll: function() {},
  //滑動完成後的回調函數。 `this` 表明觸發滑動的元素
  afterScroll: function() {},
  //緩動效果
  easing: 'swing',
  //滑動的速度
  speed: 400,
  // "自動" 加速的係數
  autoCoefficent: 2
});

什麼？沒看懂？？不要緊！！下邊還有一波無腦操做！

只須要把文件導入後，將下邊的代碼copy進去就能夠了，即可輕鬆實現頁面中的平滑滾動

 

<script>
    $(document)
    .on('click', 'a[href*="#"]', function() {
      if ( this.hash ) {
        $.bbq.pushState( '#/' + this.hash.slice(1) );
        return false;
      }
    })
    .ready(function() {
      $(window).bind('hashchange', function(event) {
        var tgt = location.hash.replace(/^#\/?/,'');
        if ( document.getElementById(tgt) ) {
          $.smoothScroll({scrollTarget: '#' + tgt});
        }
      });

      $(window).trigger('hashchange');
    });
  </script>

 

下面就是點擊technolog滑動到 id爲a1的div區，簡單吧！

<a href="#a1">Technology</a>
<div id="a1">
</div>

smooth-scroll.js的下載地址？網上好多好多，找不到正確的？留言郵箱啊，博主服務一條龍。。。