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』関数を使った色々な『ページトップへスクロールしながら戻る』を紹介したいな~。