Smooth Scroll して画面の上に戻るJavaScript
最近よく見かけるSmooth Scroll で画面上に戻る、JavaScript実装方法を紹介する。戻るリンクの部分は、画像ボタンでもテキストリンクでもどちらにも対応する方法なので、サイトのデザインにあわせて別途ご用意いただきたい。
動作サンプルは、このページの右下にあるボタンで動作を確認していただきたい。
実際のJavaScript記述を紹介する前に、大まかな一連の処理を説明しておく。
実装する処理の流れ
- 画面読込み完了イベントをリスナーに登録 - addListener()
- クリック時のイベントを登録 - addListener()
- クリック時のイベントを処理 - doBackScroll()
尚、今回のJavaScriptは外部ファイルとして、HTMLヘッダ部分で呼び出すことを前提にしている。
スクロール部分のJavaScritp
// BackScrollイベント処理
function doBackScroll() {
var pos = getScrollPosition();
window.scrollTo(Math.max(Math.floor(pos.x / 2),0), Math.max(Math.floor(pos.y -(pos.y / 5)),0));
if (pos.x > 0 || pos.y > 0) {
window.setTimeout("doBackScroll()", 35);
return false;
}
}
// スクロール量を取得し、オブジェクトとして返す
function getScrollPosition() {
var obj = new Object();
obj.x = document.body.scrollLeft || document.documentElement.scrollLeft;
obj.y = document.body.scrollTop || document.documentElement.scrollTop;
return obj;
}
Math.max( Math.floor( pos.y - (pos.y / 5) ) ,0) このスクリプト部分で Math.floor( 全スクロール量（Y）の 1/5 ) の少数点以下切捨てる。Math.max（ 計算結果 , 0 )で2つの数値の大きいほうが結果として返されることになる。
Math.floor部分の分割する数値を大きくすることで、1回の処理でスクロールする量が小さくなる。また、スクロールそのものを遅くするには window.setTimeout の数値を大きくすれば良い（1/100秒）。
イベントトリガーとリスナー登録部分のJavaScritp
// イベントリスナー登録
function addListener(elem, eventType, funcRef, capture) {
if(!elem) { return false; }
if(elem.addEventListener) {
elem.addEventListener(eventType, funcRef, capture);
} else if(elem.attachEvent) {
elem.attachEvent('on' + eventType, funcRef);
} else {
return false;
}
return true;
}
// WindowLoad時の処理
function addLoadListener(e) {
addListener(document.getElementById('Back2Top'), 'click', doBackScroll, false);
}
// WindowLoadのイベントリスナーをセット
addListener(window, 'load', addLoadListener, false);
HTML部分の記述
<a href="#" id="Back2Top">TOP</a>
後は前述したJavaScriptコードをあらかじめ読み込んでおけば、クリックイベントが処理されるようになる。 同一ページ中に複数のTOPへ戻るリンクを設けたい場合は、id="" の部分とclickイベントへ登録するWindowLoad時の処理を追加することで可能になる。
今回説明したJavaScriptをライブラリファイルとしてダウンロードできるようにしたので、参考にしていただきたい。サイトにそのまま利用できるので、ご活用いただきたい。
smooth_scroll_top.jsのダウンロード
- 関連記事 リスト
Smooth Scroll して画面の上に戻るJavaScript
最近よく見かけるSmooth Scroll で画面上に戻る、JavaScript...続きを読む
scrollBy - ページ内リンクをスムーズにスクロールする
ページ内リンクをJavaScriptでスムーズにスクロールするサンプルを紹介する...続きを読む
scrollTop scrollLeft - ブラウザのスクロール状態を取得する
JavaScriptのscrollTop scrollLeftでスクロール量を取...続きを読む
