- ページのトップまでヌルヌルと移動する JavaScript

2006/10/28/Sat.ページのトップまでヌルヌルと移動する JavaScript

互換性の問題さえなければ、もっと JavaScript を使うのに、と思う T です。こんばんは。

JavaScript だけでサイトを構築すればさぞ面白いだろうと思う。閲覧するブラウザを限定すれば無理な話ではない。実験的にやってみようかと以前から考えているが、大変であろうという想像が実行を躊躇させている。

Web 日記

ページのトップまでヌルヌルと移動する JavaScript。どこからか拾ってきたものの改良だが、どのページで見かけたのか思い出せない。

function getScroll () {
 var scrollObj = new Object();
 var x1 = x2 = x3 = 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;
 scrollObj.x = Math.max(x1, Math.max(x2,x3));
 scrollObj.y = Math.max(y1, Math.max(y2,y3));
 return scrollObj;
}

function goPageTop () {
 var Obj = getScroll();
 window.scrollTo(Math.floor(Obj.x/2), Math.floor(Obj.y/2));
 if (Obj.x > 0 || Obj.y > 0) { window.setTimeout("goPageTop()", 25); }
}

<a href="#" onClick="goPageTop()">Page Top</a>

ポイントは、「ページのスクロール量」をどうやって求めるかにある。どのプロパティが適切な値であるかは、ブラウザ毎に異なる (!)。とはいえ、例えば y 座標は、まァ次のどれかである。

そこで、これらを全部取ってきて、最大値を scrollObj.y に代入するという泥臭いことをする。x 座標も同様だが、原理的に横スクロールが発生しないページでは、最初から x = 0 で固定しても問題はないだろう。後はページのトップ (0, 0) にスクロールするだけである。移動のヌルヌル感を演出するため、1回につき、トップと現在の位置の中間までしか移動しない。この動作を再帰的に繰り返すと、「最初は速く、次第に遅く」というヌルヌル移動をする。1回の移動量、再起までの時間を調整すれば、望みのヌルヌル感が得られる。

これを応用すれば、アンカーまでヌルヌルと移動するスクリプトが書けるのではないかと考えたのだが、実はそんなに簡単ではなかった。次回は、アンカーまでヌルヌルと移動する JavaScript について書く。

研究日記

大学 → 病院。

細胞が上手く育っていなくてカッとなる。