▲TOP(このページの上へ戻る)をスムーズに動かす

ホームページが長くなった時、ページの上に戻りやすいように
「▲このページの先頭へ」とか
「▲TOP」というテキストリンク等をページの下の方に作っておくと
ホームページがちょっと使いやすくなりますよね。

「▲このページの上へ」をクリックすると、ページがパッと切り替わって
ページの先頭部分が表示されるようになるのが一般的ですが
インターネットに不慣れな方を見ていると、
何が起こったんだろう？？とか
別のページに来ちゃった？？と一瞬戸惑ってしまう方もいらっしゃるようです。

そこで「▲このページの上へ」をクリックすると
シュルシュル～っとスクロールして上に移動してくれるJavascriptを仕込む方法があります。

SIMPLE*SIMPLE ～ウェブ職人のための小粋なネタ帳さんの
「このページの先頭へ、をちょこっとおしゃれに」という記事を参考にさせていただきました。

いつも興味深い記事、楽しく拝見させて頂いております<(_ _)>

元ネタは「A (slightly) better technique for “Back to Top” links.」との事。

以下解説です。

まず、「backToTop.js」というファイルを用意します。
※エディタで新規作成して「backToTop.js」という名前で保存すればOKです。

備忘の為に転載させて頂きますと、backToTop.jsの中身は下記のとおり。
[code]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()”, 25);
}
}[/code]