ページ内のアンカーをジャンプする際、少しずつスクロールさせるライブラリです。
一瞬で移動しないので、ページ内のどこまでスクロールするのかがわかりやすく、
スクロール後にアンカーエレメント、エレメントに含まれるヘッダ等指定されたエレメントを点滅させます。
スクロールスピード、スクロール幅、点滅回数、点滅速度、ハイライトのスタイルを自由に変更出来ます。
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で使用すると、スクロールが止まらなくなるバグが発見されました。
再読込でスクロールは止まります。原因を調査中です。
行数 | : | 変数名 |
---|---|---|
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={ |
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> |
JavaScriptから呼び出して、スクロールさせることが出来ます。
<head><a href="top">トップへ</a>などのタグを調べて、自動的にスムーススクロールを割り当てていきます。
<script type="text/javascript" src="blinkhash.js"></script>
</head>
Firefox3で使用すると、スクロールが止まらなくなるバグが発見されました。(2008/7/10)
原因を調査中です。