- 2006-09-27 (Wed) 7:08
- ナビゲーション
ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。
そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このブログでも導入してありますので是非体験してみてください。
↑ ページの下の方でこの「↑」を押すとするすると上まで戻ります。
導入方法は簡単で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」ボタンで戻る人もいるでしょうが、こういう気持ちよいギミックはさりげなく使っておきたいですね。
- Newer: コメント欄を読みやすくする方法
- Older: トラックバックがしやすくなる小技
Comments:14
- Ｐａｖｌｏｂａ 06-10-05 (Thu) 1:38
-
はじめまして。
スクリプトをお借りしていきました。
動きが絶妙で、設置完了してからしばらく遊んでました(笑)非常にわかりやすいカスタマイズがたくさんあるので、今後とも参考にさせていただけたらと思っています。
勝手ながら記事内よりリンクさせていただき、またTBさせていただきました。
もし不都合等あるようでしたら連絡いただければと思います。
今後ともどうぞ、よろしくお願い致します。 - 果報は寝て待て(-_☆) 06-10-05 (Thu) 1:38
-
TOPへの戻り方
以前、ドコかで見かけた小技。
TOPへ戻る時に、スクロールして戻るかのように見せてくれるスクリプト。いざやってみようって思ったら、ドコで見かけた…
- passerby 06-10-07 (Sat) 6:02
-
Math.maxは引数を二つ以上取れると思いますよ？
- abnlog 06-10-10 (Tue) 18:04
-
カスタマイズいろいろ
あたらしく作り直したこのブログにちょっと手を加えました。 カイ氏伝: Movab…
- mog 06-10-11 (Wed) 15:14
-
はじめまして。
早速試してみたのですが、スルスルスルーと
スクロールしてくれません。
パッと一瞬で先頭へ行ってしまいます。何故でしょうか？
スクロールできたら、かっこいいですよね。 - Bloc Notes 06-10-15 (Sun) 11:53
-
「このページのトップへ」をJavascriptで
「このページのトップへ」をJavascriptで制御
- web-conte.com 06-10-24 (Tue) 16:37
-
ページ内リンク（ID）にするするっと移動する
きっかけとなった記事は「このページの先頭へ、をちょこっとおしゃれに」。 ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリ…
- blog.creamu.com 06-11-10 (Fri) 0:51
-
「このページの先頭へ」のリンクをjavascriptでスムーズな動きに
「このページの先頭へ」のリンクをつけました。 画像はこれ → htmlソースは…
- Bosotto 200X 06-12-01 (Fri) 18:01
-
このページの先頭へ
よくＨＰやブログで、「このページの先頭へ」とか「Back to Top」とか見かけるが、クリックすると瞬時にトップへ移動してしまい、どこにいったのか一瞬混…
- gerenuk.crazyphoto.org/ 06-12-03 (Sun) 20:04
-
エントリー・テンプレートのコメント周りの修正
デフォルトだと各エントリーの下部を大きく占領してしまう「コメント投稿フォーム」…
- ブランドって何だぁ？ 07-02-12 (Mon) 13:51
-
ページのトップへスルスル～ッと戻るスクリプト
こちらは百式で有名な田口様が運営しているSiMPLE*SiMPLEで紹介されていたものを設置しました。ありがとうございました。 各記事のフッターに「TO…
- å°ããªä¸åç£ä¼ç¤¾ã®çµ¦æ¹¯å®¤ 07-08-29 (Wed) 22:58
-
ã¹ã«ã¹ã«ã¨ãã¼ã¸ã®ãããã«ç§»åãã
å½ç¤¾ã®ç©ä»¶ã®ãã¼ã¸ã¯ç¸¦é·ã®ãã®ãå¤ããã§ãã
http://w... - 熱帯魚を飼ってみる 07-10-17 (Wed) 23:05
-
ブログいじり
最近、また、ブログデザインをいじってました。 モノトーン調の落ち着いたデザインを目指してたんですけど、ちょっと地味になりすぎたようです。 今回の変更の目…
- テイン 08-10-27 (Mon) 1:17
-
はじめまして。
このたび、so-netブログからやって参りました。
こちらの記事を参考にさせていただいて、
無事、設置できましたのでご報告させていただきます！
ありがとうございました^^SIMPLE*SIMPLE様に断りもなく
今後もぜひ参考にさせていただきたくリンク、
さらにTBさせていただきましたことも
合わせてご報告させていただきますm(_ _)m
今後ともどうぞよろしくお願いいたします。
Trackbacks:2
- Trackback URL for this entry
- http://www.simplexsimple.com/archives/2006/09/post.html/trackback
- Listed below are links to weblogs that reference
- このページの先頭へ、をちょこっとおしゃれに from SIMPLE*SIMPLE ～ Web職人のための小粋なネタ帳
- trackback from 外壁屋さんのブログ 09-05-14 (Thu) 11:26
-
「このページの先頭へ」をお洒落に追加♪
今日は眩しいくらいにいい天気ですね。
テンションがあがりますが、昨日でなくて良かった・・・
昨日は三芳でパネル設置があり、一日中屋根に。
母屋と納屋と２箇所に設置した…
- pingback from ▲TOP(このページの上へ戻る)をスムーズに動かす – ホームページの作り方 09-08-20 (Thu) 0:03
-
[...] SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳さんの 「このページの先頭へ、をちょこっとおしゃれに」という記事を参考にさせていただきました。 [...]
