スムーススクロール
scrollイベント
要素がスクロールした時のイベントとして関数を指定できます。
scrollTopイベント
「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。
タイミング
jQueryでのアニメーションタイミングは'linear' か、'swing' の2種類のみです。
linear = 常に同じ速度
swing = 始めゆっくり、途中が速め、最後はゆっくり(山なり)※デフォルト
サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。
$(function() { $('#btn a').on('click', function () { $('html,body').animate({ scrollTop: 0 }); }); });
停止位置100px、スピード300ミリ秒、タイミング「linear」の場合
$(function() { $('#btn a').on('click', function () { $('html,body').animate({ scrollTop: 100},300, 'linear'); }); });
複数の場所にスムーススクロールで移動させたい場合
$(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^="#"]').on('click',function() { // スクロールの速度 var speed = 400; // ミリ秒 // 移動先を取得 var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });
位置の取得
position()は、親要素から見た座標を取得します。 offset()は、親要素関係なく、documentから見た座標を取得します。
さらに複数回使う要素は変数に置き換えた方が効率的なので記述するパターンも覚えておきましょう。
以下はターゲット要素より、50px上にスクロールするサンプルです。
var position = target.offset().top - 50;
場合によってはある程度スクロールしてから表示させたい場合もあります。
その場合、まず「.hide」で見せなくさせて、ある条件(今回の場合は何pxスクロールしたら)になったら、
「.fadeIn」で表示させ、ある条件以外の時は「.fadeOut」で非表示にさせましょう。
ある程度スクロールしたらボタンを表示させる
$('#to_top').hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#to_top').fadeIn(); } else { $('#to_top').fadeOut(); } });