このページの先頭へ、をちょこっとおしゃれに


ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長~いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。

そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。

tothetop.gif

↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。

導入方法は簡単でJavascriptを導入し、「このページの先頭へ」リンクにonClickイベントを仕込むだけです。

仕込むJavascriptはこちら。ちなみに元ネタは「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()", 25);
}
}

「このページの先頭へ」に仕込むリンクはこちら。

<a href="#" onclick="backToTop(); return false">このページの先頭へ</a>

人によっては「Home」ボタンで戻る人もいるでしょうが、こういう気持ちよいギミックはさりげなく使っておきたいですね。

ツイッターもやっています!

フォローはお気軽に!@taguchiまで!

  1. はじめまして。
    スクリプトをお借りしていきました。
    動きが絶妙で、設置完了してからしばらく遊んでました(笑)

    非常にわかりやすいカスタマイズがたくさんあるので、今後とも参考にさせていただけたらと思っています。
    勝手ながら記事内よりリンクさせていただき、またTBさせていただきました。
    もし不都合等あるようでしたら連絡いただければと思います。
    今後ともどうぞ、よろしくお願い致します。

  2. TOPへの戻り方

    以前、ドコかで見かけた小技。
    TOPへ戻る時に、スクロールして戻るかのように見せてくれるスクリプト。

    いざやってみようって思ったら、ドコで見かけた…

    • passerby
    • October 7th, 2006

    Math.maxは引数を二つ以上取れると思いますよ?

  3. カスタマイズいろいろ

    あたらしく作り直したこのブログにちょっと手を加えました。 カイ氏伝: Movab…

  4. はじめまして。
    早速試してみたのですが、スルスルスルーと
    スクロールしてくれません。
    パッと一瞬で先頭へ行ってしまいます。何故でしょうか?
    スクロールできたら、かっこいいですよね。

  5. 「このページのトップへ」をJavascriptで

    「このページのトップへ」をJavascriptで制御

  6. ページ内リンク(ID)にするするっと移動する

    きっかけとなった記事は「このページの先頭へ、をちょこっとおしゃれに」。 ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長~いページだとそのリ…

  7. 「このページの先頭へ」のリンクをjavascriptでスムーズな動きに

    「このページの先頭へ」のリンクをつけました。 画像はこれ →  htmlソースは…

  8. このページの先頭へ

    よくHPやブログで、「このページの先頭へ」とか「Back to Top」とか見かけるが、クリックすると瞬時にトップへ移動してしまい、どこにいったのか一瞬混…

  9. エントリー・テンプレートのコメント周りの修正

    デフォルトだと各エントリーの下部を大きく占領してしまう「コメント投稿フォーム」…

  10. ページのトップへスルスル~ッと戻るスクリプト

    こちらは百式で有名な田口様が運営しているSiMPLE*SiMPLEで紹介されていたものを設置しました。ありがとうございました。 各記事のフッターに「TO…

  11. スルスルとページのトップに移動する

    当社の物件のページは縦長のものが多いんです。
    http://w...

  12. ブログいじり

    最近、また、ブログデザインをいじってました。 モノトーン調の落ち着いたデザインを目指してたんですけど、ちょっと地味になりすぎたようです。 今回の変更の目…

  13. はじめまして。
    このたび、so-netブログからやって参りました。
    こちらの記事を参考にさせていただいて、
    無事、設置できましたのでご報告させていただきます!
    ありがとうございました^^

    SIMPLE*SIMPLE様に断りもなく
    今後もぜひ参考にさせていただきたくリンク、
    さらにTBさせていただきましたことも
    合わせてご報告させていただきますm(_ _)m
    今後ともどうぞよろしくお願いいたします。