Wings-Winds

Wings-Winds:Software:Web [スムーススクロール]



スムーススクロールライブラリ

ページ内のアンカーをジャンプする際、少しずつスクロールさせるライブラリです。
一瞬で移動しないので、ページ内のどこまでスクロールするのかがわかりやすく、
スクロール後にアンカーエレメント、エレメントに含まれるヘッダ等指定されたエレメントを点滅させます。

スクロールスピード、スクロール幅、点滅回数、点滅速度、ハイライトのスタイルを自由に変更出来ます。

IE5.x、Mac IE、Netscape4.xでは、<a name="top">?</a>へのスクロールは対応していますが、
<div id="top">?</div>のようなidで指定されたアンカー(タグ)へのスクロールは出来ません。
ですが、このライブラリを使うことで、この指定方法でもスクロールできるようになります。
(IE6、Firefox1.5、Netscape7、Opera8など、最新のブラウザ(最新バージョンのブラウザ)はスクロール出来ます。
XHTMLやHTML4.01の文法では、IDを使ったアンカーの指定を出来るとしています。)
Netscape4.8でのHTMLの記述に制限があります。詳しくはreadme.txtをご覧下さい。


(2008/7/10)
Firefox3で使用すると、スクロールが止まらなくなるバグが発見されました。
再読込でスクロールは止まります。原因を調査中です。


サンプル

Sample Code ( プロパティ )

8行目から16行目をページに合わせて変更して下さい。(記述例は初期値)
行数 : 変数名
08 : this.BlinkSpeed=200;
点滅スピード(単位・ミリ秒)
09 : this.BlinkTimes=3;
点滅回数
0を指定すると点滅しませんので、一般のスムーススクロールライブラリと同じになります
10 : this.Bar=['h1','h2','h3','h4','h5','h6','h7','caption'];
点滅部位
左から順番に調べていき、最初に見つかったエレメントを点滅させます
11 : this.HighlightStyle={backgroundColor:'#ff9999',color:'#009900'};
ハイライト(点滅)のスタイル
元に戻す時のスタイルは自動的に取得します。
DOMによる指定、またはスタイルシートによる指定が可能。
CSSによる指定は、属性、値ともにクォーテーションで囲って下さい。
    this.HighlightStyle={
         "background-color":"#ff9999",
         "color":"#009900"
       };
12 : this.ScrollPixels=100;
スムーススクロールの移動最大ピクセル数
13 : this.ScrollSpeed=100;
スムーススクロールの移動スピード(単位・ミリ秒)
14 : this.ConstLeft=true;
trueを指定すると、横方向へのスクロールを行いません
15 : this.ConstTop=false;
trueを指定すると、縦方向のスクロールを行いません
16 : this.UseParent=true; (ver.0.9で追加)
trueを指定すると、以下のようなアンカーに何も含まれない場合に、<a>の親要素または、次にある要素がBarに指定されたタグかどうかをチェックし、該当する場合はハイライトします。
<a name=""></a><h1>ヘッダ</h1>
<h1><a name=""></a>ヘッダ</h1>

Sample Code ( メソッド )

JavaScriptから呼び出して、スクロールさせることが出来ます。

Blink.Scroll()
引数:なし
(0, 0)の位置までスクロールします。
ConstLeft、ConstTopの影響を受け、ともにfalseの場合はスクロールしません。
ウインドウサイズ(スクロールバーの制限)を越えるスクロールはできません。
スクロール後のハイライトは行いません。
Blink.Scroll(n);
引数:n : integer
ConstTopがtrueの時は横方向のみ、x=nまでスクロールします。
ConstLeftがtrueの時は縦方向のみ、y=nまでスクロールします。
ConstLeft、ConstTopがともにfalseの場合はスクロールしません。
ConstLeft、ConstTopがともにfalseの場合は縦横とも (n, n) までスクロールします。
ウインドウサイズ(スクロールバーの制限)を越えるスクロールはできません。
スクロール後のハイライトは行いません。
Blink.Scroll(y, x);
引数:y : integer
x : integer
ConstLeft、ConstTopの設定を無視し、 (y, x) の位置までスクロールします。
ウインドウサイズ(スクロールバーの制限)を越えるスクロールはできません。
スクロール後のハイライトは行いません。
Blink.Scroll(id);
引数:id:string
エレメントのidまたはnameを指定し、その位置までスクロールします。
<a href="#id">をクリックしたときの動作のエミュレートです。

Sample Code ( HTML )

HTMLでの設定は基本的に不要です。
<script>タグを記述して、スクリプトファイルを読み込んで下さい。
<head>
<script type="text/javascript" src="blinkhash.js"></script>
</head>
<a href="top">トップへ</a>などのタグを調べて、自動的にスムーススクロールを割り当てていきます。

対応ブラウザ(動作確認済み)

Todo

Bugs

Firefox3で使用すると、スクロールが止まらなくなるバグが発見されました。(2008/7/10)
原因を調査中です。

COPYRIGHT
Copyright(c) 2005-2007 WATARU. All rights reserved.
商用、非商用にかかわらず、自由に改変、ご利用頂けます
改変しないファイル、またはアーカイブ単体での再配布、販売を禁止します
このライブラリを使用したこと、または使用しなかったことにより不具合等が生じた場合でも、作者は一切の責任を負いません
改変時、Wings-Windsの著作権表記を残して頂けると幸いです