time 2017/10/17
色々なサイトでよく見る『スクロールしながらページトップに戻る方法』を2つ紹介したいと思います。
▼『jQuery』を使用したページトップへ戻る
『jQuery』を使用すると、簡単に『スクロールしながらページトップ』を実現することができます。
以下がソースコードです。
▼HTML
<a href="#top" id="jPageUp">ページトップへ戻る</a>
▼JavaScript
$(function(){ // jQueryアニメーションでページトップに戻る $("#jPageUp").click(function(){ jPageTop(); return false; }); }) // jQueryアニメーションでページトップ function jPageTop() { $('html,body').animate({ scrollTop: 0, scrollLeft: 0 }, 'normal'); }
jQueryのアニメーション効果を作成する『animate』関数を使用し、スクロール位置を0に戻す感じですね。
クリックイベントハンドラの最後にある『return false』は、アンカー名がつかないようにするだけなので、好みで削除してもかまいません。
▼『jQuery』を使用しないでページトップへ戻る
『jQuery』を使用しない場合、当たり前の事ですが、自前で計算してスクロール位置を0に戻すことになります。
以下がソースコードです。
▼HTML
<a href="#top" id="pageUp">ページトップへ戻る</a>
▼JavaScript
window.onload = function(){ document.getElementById('pageUp').onclick = function(){ pageTop(); return false; }; }; // 計算でページスクロールを0に戻す function pageTop() { var top = Math.floor(document.documentElement.scrollTop || document.body.scrollTop); var left = Math.floor(document.documentElement.scrollLeft || document.body.scrollLeft); if(top > 0 || left > 0) { document.documentElement.scrollTop = top / 1.25; document.documentElement.scrollLeft = left / 1.25; setTimeout("pageTop()", 20); } }
スクロール位置を取得して、0になるまで『setTimeout』で割り算を続ける感じです。
重要なのは、『return false』をクリックイベントハンドラの最後に書くことで、<a>要素のリンクとしての処理を停止させることです。
『jQuery』を使用しないで『return false』をクリックイベントハンドラに書かないと、リンクとしての処理も同時に開始することになり、思い通りの動きになりません。
以上が、『スクロールしながらページトップに戻る方法』です。
機会があれば、『jQuery』の『easing』関数を使った色々な『ページトップへスクロールしながら戻る』を紹介したいな~。