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)

デモ

動作サンプルはこちらを御覧ください。

設置方法

ダウンロード

  1. 上記リンクからダウンロードしたファイルを、以下の通りに保存します。
    [js]
      ├ jquery-1.4.3.min.js
      ├ jquery.insidescroll-min.js
      └ jquery.easing.1.3.js(任意)
    
  2. 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>(任意)
    
  3. 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
「#」を含むリンク先の存在チェックを削除。(リンク先がない場合にエラーが出ていた)
1.0.2
jQuery.noConflict()を使用しても動作するように変更。
href="#"を無視するように変更。
1.0.1
ページ中に「#」を含むURIがあるとき、それ以降の要素が無視されていたのを修正。

ページトップに戻る