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

■動作テスト

▲このページの上へ

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

スポンサーリンク
Webサービス・プログラム
yui

趣味が高じてフリーランスWEBデザイナーになり早10年。2児の母
ホームページ作りの楽しさと、作ったHPから申込・問合せがどんどん入ってくる楽しさを共感できる人を増やしたくてコツなどを発信しています。

フォローする
速度&安定性が人気のレンタルサーバー
国内最速!『ConoHa WING』
ConoHa WING

初期費用無料最低利用期間無し(日割りOK)、独自SSL無料。

高速・高機能・高安定性はもちろん、分かりやすい管理画面なので初心者でも使いやすい。

「WordPressかんたん移行」機能で他サーバーからの引越しも楽々!特にwordpressの表示が重くて困っている方にオススメのレンタルサーバーです。

高速&初心者でも安心『エックスサーバー』

初心者でも安心の電話サポート付きの高速サーバー。独自SSLも無料。

安定性とセキュリティ対応の早さは特筆!国内高速バックボーンと、独自の高速化機能でwordpressもサクサク動きます。

WordPress簡単インストールや、他サーバーから簡単に引越せる「WordPress簡単移行」、自動バックアップなど全部揃っています。

カゴヤのレンタルサーバー

堅実・安心、サポート力で人気があるサーバーです。高速環境のほか、自社所有のデータセンターで管理・運営されているほか、wordpress専用サーバーなどニーズに併せたプランが豊富なところも魅力。

ホームページの作り方
タイトルとURLをコピーしました