スムーズにスクロールするjQueryプラグイン
- Data
- 2017/03/26
- Tag
今までnpmに登録していなかったので作りなおして登録しましたっ!
スムーズにスクロールするプラグインは色々あるのですが、
必要な機能を備えたプラグインが見つからなかったので作ってみました。
前々からつくってはいたのですが、
昔の拙いコードが残っていたので少し整理しました。
仕様
- アンカーで移動後にアドレスを変更(アドレスにハッシュを付与する)。
- 座標を指定してのページ内リンク。
- ロード時にページの先頭からハッシュの位置までスムーズに移動することができる。
- 移動完了後に指定した関数を実行。
- スクロール途中、マウススクロールしたときにカクカクした動きをする問題をスクロールをストップすることで回避。
- スクロール途中に画面をクリックした場合にスクロールが止まる。
デモ
必要なプラグイン
- jquery
- jquery.easing
スクロール時のanimate
のeasing
の初期値にeaseOutQuart
を使用しているため、このプラグインが必要です。
インストール
Npm
npm install jquery.smooth-page-scroll
使い方
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.smoothPageScroll.js"></script>
<script>
$.smoothPageScrollByLoaded();
$('a[href^="#"]').smoothPageScroll();
</script>
a要素以外につけたい場合
$('h1').smoothPageScroll({
target: '#header'
});
移動後に関数実行
$('a[href^="#"]').smoothPageScroll({
complate: function(e) {
console.log(e);
}
});
座標を指定してリンク
#1000,1000
//(x, y)
任意のタイミングでスクロールする
$.smoothPageScrollStart({
target: '#header'
});
Options
option name | type | Descriptions | default |
---|---|---|---|
easing | String |
イージングの種類 | 'easeOutQuart' |
speed | Number |
スクロールスピード | 1000 |
delay | Number |
スクロール開始までの待ち時間($('body').animate.delay(delay) | -999999 |
target |
String or jQuery Object
|
直接ターゲットを指定する (例) #header or $(#header) ※ 値の指定がない場合は(0, 0)になります。 |
undefined |
complate | Function |
スクロール完了後に実行したい関数 | '' |
isAddHash | Boolean |
スクロール後にhashを追加するか | true |
isTopScroll | Boolean |
縦方向にスクロールするか | true |
isLeftScroll | Boolean |
横方向にスクロールするか | true |
初期設定
//ロード時の処理
$.smoothPageScrollByLoaded({
easing: 'easeOutQuart',
speed: 1000,
complate:'',
target: location.hash,
isAddHash: true,
isTopScroll: true,
isLeftScroll: true
});
//クリック時の処理
$('a[href^="#"]').smoothPageScroll({
easing: 'easeOutQuart',
speed: 1000,
delay: 0,
target: undefined,
complate: '',
isAddHash: true,
isTopScroll: true,
isLeftScroll: true
});