「このページのトップへ」をJavaScriptで
今までは、ページ上部へのリンクをHTMLで、
<a name="top" id="top"></a><a href="#top" title="このページのトップへ">▲</a>としていたものを、JavaScriptで制御するように変更しました。（デモページへ）
- このページの先頭へ、をちょこっとおしゃれに
- » http://www.simplexsimple.com/archives/2006/09/post.html
JavaScript
JavaScriptは、backToTop.jsと名前をつけて外部ファイルに保存します。
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);
}
}(X)HTML
<head></head>の間に、ファイルへのパスを記述し、リンクを変更します。
<script type="text/javascript" src="backToTop.js"></script><a href="#" onclick="backToTop(); return false" title="このページのトップへ">▲</a>これで、「ドン！」とページの上部へ飛んでいたものが、「シュルシュル～」とした挙動になりました。
* * *
テンプレートを戻しため、2007年5月現在、このJavaScriptは適応されていません。
- 「このページのトップへ」をJavaScriptで
- » demo/javascript.html
追記: May 4, 2007
.
Post a Comment
（ 認証サービスにサインインしないで、匿名でもコメントできます。詳しくはComment Policyをご覧ください。）