anything from here Smooth　Scroll　の導入

▼ Browsing MENU
||
ホーム
＞
Javascript | 2007年07月＞ this entry

それはSONYのHomepageを見て以来、ずっとやりたいことだった。

SONYのWebサイトでは既に数年前にSmooth Scroll（それをそう呼ぶと言うことを知ったのは今日であるが）を実現していた、と記憶している。その方法として window.scrollTo(x,y) メソッドを使っていることは疑いようもなかったが、どの様すれば Smooth Scroll が実現できるのか、それ以来、時々ふと思案したりしていた。（因みにSONYのWebsサイトからjsファイルはダウンロードできるが、Smooth Scrollを実現しているコードは見つけられなかった。）

スクロール済み座標値のその大きさに応じて、加速度的にスクロール速度を減らせば良いのだから、例えば何らかの幾何関数を使うのか、とまず考えた。しかし、それで加速度的にスクロール速度を減速できるだろうか？、否、setTimeoutに設定する時間間隔を加速度的に減らしていけば次第に動きは遅くなるが・・・とも考えた。入浴中にサインカーブを思い浮かべながらどうすれば良いのだろう、と考えたりもした。

そして今晩。

通常配置要素のoffset値取得問題が解決したので、次の課題としてSmooth Scrollを実現しようと意気込み、その方法を探るためにグーグったら、数日前に触れたあの「youmos」サイトがTopにヒットした。ここならば間違いなく欲しいものがあるだろうと期待して覗いてみたところ、期待に違わず、まさしくそこにはあるべき回答が存在した。感謝！youmos！　Smooth Scroll して画面の上に戻るJavaScript - youmos

しかし、idを設定した要素に適用するのでは困る・・・

そこをクリックすれば「ページトップに戻る」仕掛けは多くのサイトで採用している。拙サイトでも随所にそれを設けているが、これまではいきなりページトップにジャンプする（window.scrollTo(0,0)メソッドに等しいＡタグを用いた）原始的・古典的方法を採用していた。

だから、やっと欲しいものを手にした子供のような心境で、youmosで紹介されていた方法を早速検討したことは言うまでもない。

さて、それはHTML内の必要な要素内にその属性としてonclick="イベントハンドラー関数"を設置するのではなく、script内で全てを処理する手法によって書かれた素晴らしいコードなのだが、致命的だったのはid名を振った要素を対象としてイベントハンドラーを設置する仕様だったことだ。

「ページトップに戻る」機能は一つのページに複数設置することが多い。その全てに固有名とならざるを得ないidを振るのはいかにも面倒だ。願わくば同一の性格を有する（class名を振った）複数の要素に対して一律に必要な仕掛けを設置できることが好ましい。

▲ToTop

そこで固有のclass名を振った特定要素群に対して、ページトップにスクロールするイベントハンドラーを設置することにした

しかし、getElementById(ID)に類する「getElementsByClassName(CLASSNAME)」なるメソッドはDOMには存在しない。だからこそ、目的を達するための関数があれこれと作成されている。特定要素群に対して「ページトップへ戻る」イベントハンドラーを設置するには、まず特定のclass名を付した要素集合を、設定対象として取得できなければならない。Smooth Scroll実現のためには、まず適切な「getElementsByClassName()」関数をゲットしなければならない。

そしてそれもグーグって最適解を見いだした。

それはRobert’s talk内のThe Ultimate getElementsByClassName - Robert’s talkである。

それは「Ultimate」を自称するにふさわしい素晴らしいものだ。何故ならばDocument全体を対象にするだけではなく、対象要素群をページの任意の一部の任意のタグ名に絞り込むことが出来るからである。そのためここ：The Ultimate getElementsByClassName - Robert’s talkでダウンロードできるgetElementsByClassName関数は引数を３つ持つ。ページ内の任意の要素の塊、その中の任意の要素、そしてクラス名である。

このUltimateなgetElementsByClassName関数は、Document全体を走査する同目的の関数が多い中で、秀逸のものと言えるだろう。但し正規表現に係るバグが有るためそのままでは支障を来す場合がある。この点については後述する。

なお、グーグったもう一つの成果としてgetElementsByClassNameがFirefox3から実装されるらしいことが分かった。

Gecko に Web Applications 1.0 の getElementsByClassName メソッドが実装されました (Bug 357450)。Firefox 3 から使用可能になります。document.getElementsByClassName で文書全体から、または element.getElementsByClassName である要素の子孫要素から、特定のクラス名を含む要素を探し出すことができます。───getElementsByClassName on Gecko: Days on the Moon

▲ToTop

次に問題となるのはFc2ブログ固有の問題だ。

Fc2ブログではブロック変数を用いることにより、windowでload時の動作において、表示するContentsに応じて様々な使い分けが出来るため、Javascriptによるwindow.loadは使いにくい、という問題がある。

だからJavascriptコード内でwindow.loadはしないこととした。

また、特定のclass群を頁トップへのSmooth Scroll起動のイベントハンドラー設置対象にするためには、id要素を対象にした場合に較べてコードは複雑にならざるを得ないが、やむを得ず必要な改変を行った。

更に問題としたのはカクカク感の解消である。

オリジナル版のようにタイマーを使った使用にすると、たとえそれが1mm秒の設定であっても、どうしてもタイマー起動時にカクカクと動作することは否めない。そしてこれが気にくわない。もっとスムースにスクロールして欲しいのである。その名もSmooth Scrollなのだから・・・。

そのため、タイマーを使わずにSmooth Scrollを実現する方策を模索した。具体的にはふさわしい関数がないものかと検討を重ねた。

なかなかオリジナルで使われていた比較的単純な関数（y－y/const）より以上に適切なものを見いだせなかった。途中で投げ出して昨日(1日夜)は、結局タイマー仕様に戻してしまった。ところが、カクカク感が解消されない問題はずっと引っかかり続け、7/2にまたタイマーを使わない計算式に戻した。その時使用関数は、何とオリジナルそのものであり、constをあれこれ入れ替えてみて、一定値＝80を選択して最終決着とした。

しかしどうも気にくわないので、エクセルで適当に表を作成しその近似曲線を求めて新たな関数を設定することにした。その関数を適用して現在はBackScrollしている。

スクロール速度はパソコンの性能や好みに依存するから、そもそもどのようなスクロールが「Smooth Scroll」と感じられるか、最も心地良いか、決定的に個人に依存するだろう。しかし私はこれが良い。

まだ問題はあった───それはゲットしたgetElementsByClassNameにバグがあったのだ。

class名は一般に複数指定されている場合がある。class="name1 name2"のようにだ。

ゲットしたUltimate getElementsByClassName には、複数名対応を考慮している式があるのだが、残念ながらそれが間違っている。

そのため、そのバグフィックスを考慮しなければならなかった。

なお、どこをどう修正したのかは下記のコード説明で行うことにする。

▲ToTop

任意のclassに適用するSmooth Scrollの完成

こうしてこのエントリイにも実装している頁トップへのSmooth Scrollを実現した（そのコードは以下の通り）。

またテンプレート（HTML及びCSS）においても、「頁トップへのSmooth Scrollイベントハンドラー設置箇所」に対して必要な修正を加えたので、過去にさかのぼって全てのエントリイに対して、Smooth Scrollを設置することが出来た。（こうしたことが出来るのも、テンプレートのテンプレートたる所以であり、ブログテンプレートの大きなメリットだ。）

特定のclassを対象としたSmooth Scroll実現コード

<script><!--
	//▼任意のクラス名の要素集合を対象documentから取得する。
function getElementsByClassName(oElm, strTagName, strClassName){
　var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
　var arrReturnElements = new Array();
　strClassName = strClassName.replace(/-/g, "\-");
　var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
　/* -------------------------------------------------------------
　 * 原文にはミスがある。文字列リテラルなのだから\sでは駄目で上記のように\\sとしなければならない。
　 * 原文のままではclass="Back2Top nama2"のように複数のクラス名が登録されていた場合、この要素を
　 * ピックアップすることが出来ない。
　 * 原文：var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
　 ---------------------------------------------------------------*/
　var oElement;
　for(var i=0; i<arrElements.length; i++){
　　oElement = arrElements[i];
　　if(oRegExp.test(oElement.className)){
　　　arrReturnElements.push(oElement);
　　}
　}
　return arrReturnElements;
}//---End Function

　// ▼スクロール量を取得し、オブジェクトとして返す
function getScrollPosition() {
    var obj = new Object();
    obj.x = (is_ie) ? (document.body.scrollLeft || document.documentElement.scrollLeft) : window.pageXOffset;
    obj.y = (is_ie) ? (document.body.scrollTop || document.documentElement.scrollTop) : window.pageYOffset;
    return obj;
}//---End Function

　// ▼BackScrollイベント処理
　// original versionのように Timerを使うと喩え1/1000秒としてもカクカクする。
　// バックスクロール時にカクカクする動作が嫌いなので、Timer不要版を作った。
function doBackScroll() {
　var pos = getScrollPosition();
　while (pos.x + pos.y > 0){
　　　//遅延速度を左右する分母数値はスクロール量に応じて変化させる「べき乗式」とし、かつ
　　　//限界値を設定した。
　　var pitch = Math.min(Math.floor(600 * Math.pow(pos.y,-0.4)),50);
　　pos.x = Math.floor(pos.x / 2);
　　pos.y = Math.floor(pos.y - (pos.y / pitch));
　　window.scrollTo(pos.x,pos.y );
　}
}//---End Function

/* -------------Original Version-------------------------------------------------
function doBackScroll() {
  var pos = getScrollPosition();
　window.scrollTo(Math.max(Math.floor(pos.x / 2),0), Math.max(Math.floor(pos.y - (pos.y / 20)),0));
　if (pos.x > 0 || pos.y > 0) {
　　window.setTimeout("doBackScroll()", 35);
　　return false;
　}
}
--------------------------------------------------------------------------------*/

　// ▼イベントリスナー登録
function addListener(elem, eventType, funcRef, capture) {
　if(!elem) { return false; }

　if(elem.addEventListener) {
　　elem.addEventListener(eventType, funcRef, capture);
　} else if(elem.attachEvent) {
　　elem.attachEvent('on' + eventType, funcRef);
　} else {
　　return false;
　}
　return true;
}//---End Function

　// ▼イベントリスナーの追加
　//ここでSmooth Scrollイベントハンドラーを設置するclassを指定している。
function addLoadListener(e) {
//　addListener(document.getElementById('Back2Top'), 'click', doBackScroll, false);
　var ary = getElementsByClassName(document.getElementById("container"),'A','Back2Top');
　var i;
　for (i=0; i<ary.length; i++) {
　　addListener(ary[i], 'click', doBackScroll, false);
　}
}//---End Function
//--></script>

▲ToTop