スクロールイベントの設定 – Webデザイン学習まとめ

scrollイベント

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

★scrollTopイベント

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

$(window).scroll(function() {
　var a=$(‘html,body‘).scrollTop();
　console.log(a);
});

■タイミング

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

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

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

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

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

★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();
　}
});