説明

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

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

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

ダウンロード

インストール

サンプル

HTML記述

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

設定 ( プロパティ )

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
：横方向へのスクロールを行いません。
false
：横方向へのスクロールを行い、要素の位置をウインドウの左端に表示します。
(数値)
：横方向へのスクロールを行い、指定されたピクセルの位置をウインドウの左端に表示します。
15 : this.ConstTop=false;
以下のいずれかを指定可能です。
true
：縦方向へのスクロールを行いません。
false
：縦方向へのスクロールを行い、要素の位置をウインドウの左端に表示します。
(数値)
：縦方向へのスクロールを行い、指定されたピクセルの位置をウインドウの上端に表示します。
16 : this.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)までスクロールします。
      指定がなければその方向にはスクロールしません。

更新履歴

サポート

対応ブラウザ（動作確認済み）

  • Windows : IE6/7/8 NetscapeNavigator4.8 Safari3/4
  • MacOS X : Safari1.0 IE5.2 iCab3.02
  • Win/Mac共通 : Firefox1.5以上 Opera7以上 Netscape7.1
  • JavaScript使用可能なこと、ユーザー定義CSSを使用しないこと
    HTMLファイルサイズが大きく、ナローバンドでNetscapeNavigatorやMacIE、IE5.0以下を使用している場合は、正常にアンカーの走査が行われないことがあります。
    また、タグの数が多いと、スムーススクロールが反映されるまでに時間がかかることがあります。

Todo

  • Safari、Mac IEで、スクロール後にアドレス欄のハッシュの表示

Bugs

  • IE6の互換モード（DOCTYPEを記述しないHTML）での表示時、
    アンカー位置がスクロール最下段よりも下にある場合、スクロール停止位置がアンカーの位置と異なる場合がある
  • アンカー位置がスクロール最下段よりも下にある場合、
    スクロール量がScrollPixels以下の場合、スクロールがスムースに終了しない
  • htmlに対してmargin border padding、またはbodyに対してmargin borderを0px以外に指定している場合、
    スクロール位置がアンカーの位置と異なる場合がある
  • IEでフレームスクロールを行うとシステムエラーが発生することがある（1.1.1で対応済み）