Inside Scroll

ページ内リンクをスムーズスクロールするjQueryプラグインを作成しました。

名称: Inside Scroll（2010/5/20更新しました）
動作環境: InternetExplorer 6 / 7 / 8; Firefox 3.5 / 3.6; Opera 10; Safari 4; Netscape 7.1
特徴: スムーズスクロールのjQueryプラグイン。; スクロール動作中にマウスのボタンを押したりホイールを動かすと停止します。; jQuery Easing Pluginに対応しています。; jQuery1.4.3に対応しています。
ダウンロード: 通常版：jquery.insidescroll.js（2.24KB）; 圧縮版（Minified）：jquery.insidescroll-min.js（1.48KB）

デモ

設置方法

ダウンロード

上記リンクからダウンロードしたファイルを、以下の通りに保存します。

[js]
  ├ jquery-1.4.3.min.js
  ├ jquery.insidescroll-min.js
  └ jquery.easing.1.3.js（任意）

htmlファイルのhead部分に以下の文を追加します。

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.insidescroll-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>（任意）

htmlファイルを保存して完了です。

オプション

アドレスの書き換え、移動時間（duration）、スピードの増減パターン（easing）の設定ができます。

設定方法

jquery.insidescroll-min.jsの最下行を編集して設定します。

変更前

$(function(){$("a[href*='#']").insideScroll()});

変更後

$(function(){$("a[href*='#']").insideScroll({ replace : true , duration : 1200 , easing : "linear" })});

replace: 内部リンクに移動したときに、アドレスを書き換えるか設定します。（デフォルトは無効：false）。ダブルクォーテーション不要。
内部リンクの移動が保存され、ブラウザの「戻る」ボタンで戻ることができます。
「true」（有効）又は「false」（無効）を入力します。
duration: 設定値は、"slow","normal","fast",または完了までの時間をミリ秒単位（数字）で指定します。（デフォルト＝normal）
ミリ秒単位（数字）で指定する場合、ダブルクォーテーション不要。
easing: 設定値は、"linear"と"swing"です。（デフォルト＝"swing"）ダブルクォーテーション要。
jQuery Easing Pluginで効果を追加できます。

easingのデモ

jQueryに初めから設定されている効果（効果名をクリックして実行）

linear
swing（デフォルト）

jQuery Easing Pluginで追加できる効果（効果名をクリックして実行）

easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

更新履歴

1.0.3: 「#」を含むリンク先の存在チェックを削除。（リンク先がない場合にエラーが出ていた）; (2010/5/20)
1.0.2: jQuery.noConflict()を使用しても動作するように変更。; href="#"を無視するように変更。; (2010/1/20)
1.0.1: ページ中に「#」を含むURIがあるとき、それ以降の要素が無視されていたのを修正。; (2010/1/15)

2010.10.25