説明

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

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

フレーム(フレームセット、インラインフレーム)対応。
<base>タグ対応。

修正BSDライセンスに準拠します。

ダウンロード

インストール

HTML記述

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

設定 ( プロパティ )

7行目から15行目をページに合わせて変更して下さい。(記述例は初期値)
行数 : 変数名
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={
         "background-color":"#ff9999",
         "color":"#009900"
       };
11 : ScrollPixels: 100,
スムーススクロールの移動最大ピクセル数
12 : ScrollSpeed: 100,
スムーススクロールの移動スピード(単位・ミリ秒)
13 : ConstLeft: true,
以下のいずれかを指定可能です。
true
:横方向へのスクロールを行いません。
false
:横方向へのスクロールを行い、要素の位置をウインドウの左端に表示します。
(数値)
:横方向へのスクロールを行い、指定されたピクセルの位置をウインドウの左端に表示します。
14 : ConstTop: false,
以下のいずれかを指定可能です。
true
:縦方向へのスクロールを行いません。
false
:縦方向へのスクロールを行い、要素の位置をウインドウの左端に表示します。
(数値)
:縦方向へのスクロールを行い、指定されたピクセルの位置をウインドウの上端に表示します。
15 : UseParent: true,
trueを指定すると、以下のようなアンカーに何も含まれない場合に、<a>の親要素または、次にある要素がBarに指定されたタグかどうかをチェックし、該当する場合はハイライトします。
<a name=""></a><h1>ヘッダ</h1>
<h1><a name=""></a>ヘッダ</h1>

JavaScriptによるメソッドの呼び出し

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

Blink.Scroll()
引数:なし
(0, 0)の位置までスクロールします。
スクロール後のハイライトは行いません。
Blink.Scroll(arg);
引数
  1. arg : Object { hash: String, target: String, x: Number, y: Number }
    1. hash: String
      エレメントのidまたはnameを指定し、その位置までスクロールします。
      <a href="#id">をクリックしたときの動作のエミュレートです。
      '#id'のように、#を付けて下さい。
    2. target: String
      <a target="frame-name">に相当します。
    3. x: Number
      y: Number
      (x, y)までスクロールします。
      指定がなければその方向にはスクロールしません。

更新履歴

  • 定義ファイル

    • ver. 1.2.1 バグフィクス
    • ver. 1.2 ブラウザの戻る・進ボタンに対応(点滅機能のみ、IE7除く)
    • ver. 1.1.1 バグフィクス
    • ver. 1.1 バグフィクス
    • ver. 1.0 フレーム対応、baseタグ対応、onstLeft、constTopの数値指定に対応
    • ver. 0.12 バグフィクス: Firefox3.0以上でスクロール地点が小数になる仕様に対応
    • ver. 0.11Scroll()メソッド追加、バグフィクス
    • ver. 0.10 バグフィクス
    • ver. 0.9 this.UseParentオプション追加
    • ver. 0.8 公開

サポート

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

  • IE7/8 Safari3.0/5.1 Firefox11 Opera11 iCab3.02 Chrome18
  • JavaScript、制作者定義スタイルシートを使用可能なこと
  • ver.1.2より、Netscape、Mac IEのサポートを終了しました。
  • ブラウザの戻る・進むボタンではスムーススクロールは行われません。
  • IE7は戻る・進むボタンでの点滅を行いません。

Todo

  • インラインフレームのアドレスが変わるときに、親フレームのスクロールを抑制する

Bugs

  • htmlに対してmargin border padding、またはbodyに対してmargin borderを0px以外に指定している場合、
    スクロール位置がアンカーの位置と異なる場合がある