▲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]

.jsファイルの使い方ですが、
例えば、htmlと同じ階層に「backToTop.js」をアップロードしたとして
html のヘッダー内に

[code]<script src=”backToTop.js” type=”text/javascript”></script>[/code]

という一文を追加して.jsファイルを読み込みます。

これで下準備は完了。

後は、「▲このページの上へ」を掲載したい個所に

[code]<a href=”#” onclick=”backToTop(); return false”>▲このページの上へ</a>[/code]

と追加すればOK。

きちんと動かないようであれば、
backToTop.jsへのパスが間違っている場合が多そうなので
ヘッダー内に追加した「src=”backToTop.js”」部分を
下記のようにhttp://からのフルパスに書きなおしてみても良いかも。

[code]<script src=”http://サイトURL/backToTop.js” type=”text/javascript”></script>[/code]

■動作テスト

▲このページの上へ

↑このリンクをクリックすると、上に戻るハズ??