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
1
2
3
4
5
6
7
プラグインの説明1、ページのどこかに簡単にスライドできるようにする2、プラグインを起動することができます.
1
1
1
2
3
1
2
3
1
2
3
1
2
3
4
5
1
2
3
4
5
パラメータ設定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
プラグインの情報
公式サイト: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
});