スクロールイベントの設定

jQuery

scrollイベント

要素がスクロールした時のイベントとして関数を指定できます。

$(window).scroll(function() {
var a=$('html,body').scrollTop();
console.log(a);
});
scrollTopイベント

「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。
{ scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:100}であればtopから100pxの位置で停止します。

タイミング

jQueryでのアニメーションタイミングは'linear' か、'swing' の２種類のみです。
linear = 常に同じ速度
swing = 始めゆっくり、途中が速め、最後はゆっくり（山なり）※デフォルト


サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。

$(function() {
  $('#btn a').on('click', function () {
    $('html,body').animate({ scrollTop: 0 });
　　return false;//リンク自体の無効化
    });
});

 

停止位置100px、スピード300ミリ秒、タイミング「linear」の場合

$(function() {
  $('#btn a').on('click', function () {
    $('html,body').animate({ scrollTop: 100},300, 'linear');
　　return false;//リンク自体の無効化
    });
});

return false

a要素は本来「移動する」という働きを持っています。さらにその上にjqueryのanimateの動きが2重に加わってしまうので、「return false」を指定してa要素の働きを制限します。




場合によってはある程度スクロールしてから表示させたい場合もあります。
その場合、まず「.hide」で見せなくさせて、ある条件（今回の場合は何pxスクロールしたら）になったら、
「.fadeIn」で表示させ、ある条件以外の時は「.fadeOut」で非表示にさせましょう。

ある程度スクロールしたらボタンを表示させる
    $('#to_top').hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#to_top').fadeIn();
        } else {
            $('#to_top').fadeOut();
        }
    });
 

や