jquery滑らかなスクロールプラグイン


Jquery自体はロールの機能を実現できますが、ちょっと粗いです.ロールというよりジャンプです.したがって、滑らかなスクロールの効果を実現するためにプラグインが必要です.最近wikiをしていいプラグインがいくつか発見されました.jquery.smoth-scrollはこの機能を実現するプラグインです.
プラグインの情報
公式サイト:https://github.com/kswedberg/jquery-smooth-scroll
デモ:http://plugins.learningjquery.com/smooth-scroll/demo/
使用手順
1、以下のjsとcssファイルを紹介する.
1
2<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script  src="../src/jquery.smooth-scroll.js"></script>2、headタグに以下のjsコードを入れる
1
2
3
4
5
6
7$(function(){  $("#btn").click(function(){       $('a').smoothScroll({          //        });   });})3、bodyタグに該当するラベルを入れる
プラグインの説明1、ページのどこかに簡単にスライドできるようにする2、プラグインを起動することができます.
1$('a').smoothScroll();3、自分の必要に応じて外部の容器を指定できます.スクロールはこの容器内で発生します.ページレベルで発生したのではありません.
1$('#container a').smoothScroll();4、指定された容器の要素を以下のように排除することができます.
1
2
3$('#container a').smoothScroll({     excludeWithin: ['.container2']});5、指定条件を満たす要素は以下の文から除外します.
1
2
3$('a').smoothScroll({    exclude: ['.rough','#chunky']});6、どの位置にスライドするか調整すると停止します.
1
2
3$('.backtotop').smoothScroll({   offset: -100});7、スライド開始前のコールバック関数を設定します.
1
2
3
4
5$('a').smoothScroll({   beforeScroll: function() {      alert('ready to go!');    }});8、スライド終了のコールバック関数を設定します.
1
2
3
4
5$('a').smoothScroll({  afterScroll: function() {     alert('we made it!');  }});9、ボタンを追加してクリックして前の位置に戻ることができます.実は歴史記録の役割です.
パラメータ設定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18$.smoothScroll({  //   offset: 0,  // , 'top' 'left'  direction: 'top',  //   scrollTarget: null,  // 。`this`   beforeScroll: function() {},  // 。 `this`   afterScroll: function() {},  //   easing: 'swing',  //   speed: 400,  // " "   autoCoefficent: 2});