ページ内のアンカーをジャンプする際、少しずつスクロールさせるライブラリです。
一瞬で移動しないので、ページ内のどこまでスクロールするのかがわかりやすく、
スクロール後にアンカーエレメント、エレメントに含まれるヘッダ等指定されたエレメントを点滅させます。
スクロールスピード、スクロール幅、点滅回数、点滅速度、ハイライトのスタイルを自由に変更出来ます。
フレーム(フレームセット、インラインフレーム)対応。
<base>タグ対応。
<head><a href="top">トップへ</a>などのタグを調べて、自動的にスムーススクロールを割り当てていきます。
<script type="text/javascript" src="blinkhash.js"></script>
</head>
行数 | : | 変数名 |
---|---|---|
07 | : | BlinkSpeed: 200, 点滅スピード(単位・ミリ秒) |
08 | : | BlinkTimes: 3, 点滅回数 0を指定すると点滅しませんので、一般のスムーススクロールライブラリと同じになります |
09 | : | Bar: ['h1','h2','h3','h4','h5','h6','h7','caption'], 点滅部位 左から順番に調べていき、最初に見つかったエレメントを点滅させます |
10 | : | HighlightStyle: {backgroundColor:'#ff9999',color:'#009900'}, ハイライト(点滅)のスタイル 元に戻す時のスタイルは自動的に取得します。 DOMによる指定、またはスタイルシートによる指定が可能。 CSSによる指定は、属性、値ともにクォーテーションで囲って下さい。 this.HighlightStyle={ |
11 | : | ScrollPixels: 100, スムーススクロールの移動最大ピクセル数 |
12 | : | ScrollSpeed: 100, スムーススクロールの移動スピード(単位・ミリ秒) |
13 | : | ConstLeft: true, 以下のいずれかを指定可能です。
|
14 | : | ConstTop: false, 以下のいずれかを指定可能です。
|
15 | : | UseParent: true, trueを指定すると、以下のようなアンカーに何も含まれない場合に、<a>の親要素または、次にある要素がBarに指定されたタグかどうかをチェックし、該当する場合はハイライトします。 <a name=""></a><h1>ヘッダ</h1> |
JavaScriptから呼び出して、スクロールさせることが出来ます。