ビューンッ！とページトップへ戻るJavascript(Ajax)
長いページなんかでよく見る
「▲このページトップへ戻る」
これは、戻したい場所にアンカーをセットしておくもの。
<a name="top" id="top"></a>を戻したいところにセットして、
<a href="hoge.html#top">このページトップへ戻る</a>を
戻したい部分のアンカーにくっつけてやるもの。
でも、コレっていきなり「ビュンッ！」って戻るもんだから、
ちょっとビックリしますよね。
そこで、これをカッコよく！そして、ちゃんと戻っているのがわかるように
スクロールできたらなぁ、とは常々思っていました。
そして、平井堅のオフィシャルサイトで
使われているのを見つけて、いろいろ探していたらやり方を見つけたので備忘録です。
参考にしたサイトはこちら。
このページの先頭へ、をちょこっとおしゃれに
by S i M P L E * S i M P L E
Javascriptコードを外部、もしくは直接ソースに書き込んで、
戻したい箇所にアンカーと一緒にonclickでセットしてあげるだけ。
●Javascriptソース
function top() {
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("top()", 25);
}
}
●onclickソース
<a href="#" onclick="top(); return false">▲このページトップへ戻る</a>
管理人はjavascriptは書けない、読めないド素人ですが、
書かれたソースコードをみるとなんとなくしたいことはわかりました。
んで、ソースコードの
window.setTimeout("top()", 25);
の部分の「25」の数字を変えてあげると戻るスクロールのスピードを調節することができます。
以下、サンプルページです。どうぞ！
→「▲このページトップへ戻る」のサンプル
関連エントリー
トラックバック(0)
このブログ記事に対するトラックバックURL:
http://km33.net/mt/mt-tb.cgi/216
コメントする
お気軽にコメントをどうぞ！
