ページ先頭へスクロールさせるスクリプト
縦長ページも気持よくスクロールしながら先頭へ移動させるスクリプトです。
スクリプト自体も短く、設置も超簡単！
このスクリプトの良いところは、ページの先頭部分に<a name="">や<div id="">などの余計なタグを
埋め込む必要がない点にあります。
ページに内に設置した先頭へ戻る為の<a>タグに、onClickイベントを記述するだけのお手軽設置です。
動作サンプルを確認する
下記のスクリプトをhtml内に書き込むか、外部ファイルから読み込みます。
※元ネタ：A (slightly) better technique for "Back to Top" links.
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 50);
}
}
■スクロールのスピード調整
("backToTop()", 50)の数値を大きくするとスクロールスピードは遅くなります。
window.setTimeout("backToTop()", 50);
}
}
htmlでの記述はリンクにonClickイベントを追加するだけ！！
<a href="#" onclick="backToTop(); return false">動作の確認｜このページの先頭へ</a>
【動作サンプル】
※下記の「動作の確認｜このページの先頭へ」をクリックするとスクロールしてページ先頭へ戻ります。
動作の確認｜このページの先頭へ
動作環境・スクリプトエラー報告・対処方法
| 動作環境 |
|---|
| エラー・バグ報告 |
| 不具合対処方 |
| 修正パッチ |