最近頻繁に使うのでメモ。
所謂スムーススクロールってやつですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
jQuery(document).ready(function($) { $('a[href^=#]').click(function() { if ($(this).hasClass('scroller')) { var target = $(this).attr('href'); if (target != '#') { target = $(target).offset().top; $('html,body').animate({ scrollTop:target },1500,'quart'); } else { $('html,body').animate({ scrollTop:0 },1500,'quart'); return false; } } }); }); jQuery.easing.quart = function(x,t,b,c,d){ return -c * ((t=t/d-1)*t*t*t -1)+b; }; |
定番すぎるので特に説明することもありませんが一応メモ。
「scroller」というクラスを持つページ内リンクに対して反応し、「#」ならページトップへ、それ以外なら指定したIDまでスクロールします。
また、トップにスクロールした場合は、 return false でURLに「#」がくっつかないようにしています。
逆に、ページの途中にスクロールした場合、更に次のページに遷移して戻ってきた時に同じ場所が表示されるよう、URLに「#foo」というふうに残るようになっています。
ページの構成上不要ならば、こちらにも「return false」すればOKだとおもいますが、あまり使わないかと…。
あとは、jQueryのanimateを使ってますので、アニメーション速度とかの設定はそれにあわせていけばOKです。
例えば、1500という部分は、アニメーションにかける時間ですので、この場合は1500ミリ秒（＝1.5秒）でスクロールするということですね。
また、jQuery easingを使ってますんで、イージングプラグインを入れるか、必要なエフェクトのみreadyの外に書いておかないとエラーになります。
|
1 2 3 |
jQuery.easing.quart = function(x,t,b,c,d){ return -c * ((t=t/d-1)*t*t*t -1)+b; }; |
って部分です。
大抵使うイージングなんて1種類くらいなので、必要なやつだけ入れておいたほうが最終的には軽くなる気がしますが、他のアニメーションなんかでもイージング使う場合はプラグインを入れておいたほうがいいかもしれませんね。
それと、トリガーになるクラス名を変更したい場合は、
hasClass(‘scroller’) の「scroller」を任意の文字に変更すればOKです。
[…] 超今更だけどページ内リンクなどでするするっとスクロールする方法 […]