スムーズにスクロールするjQueryプラグイン

  • このエントリーをはてなブックマークに追加

スムーズスクロールを実装したいときに、「この機能はないのかなぁ・・。」とか探したりするのが大変だったので、自分のなかで必要な機能を切り替えて使えるスムーズスクロールをjQueryのanimateのscrollTop,scrollLeftをつかってjQueryプラグインを作ってみました!

前々から作ってはいたのですが、昔の拙いコードが残っていたので少し整理しました。


仕様

  1. アンカーで飛んだあとアドレスもちゃんと変更。
  2. 座標を指定してのページ内リンク。
  3. アクセス時、座標アンカーがついている場合その位置に移動します。
  4. アクセス時ページの先頭からその場所までスムーズに移動できるようにすることもできます。
  5. 移動後の関数実行
  6. スクロール途中、マウススクロールしたときにカクカクした動きをする問題をスクロールをストップすることで回避。

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/smoothAnchor.js"></script>

初期設定

$(window).smoothAnchorInit();
$('a[href^="#"]').smoothAnchor();

a要素以外につけたい場合

$('h1').smoothAnchor({
    easing : 'easeOutQuart',
    speed : 1000,
    target: '#header'
});

Flashから実行する場合

ExternalInterface.call("smoothAnchor",{
    easing : 'easeOutQuart',
    speed : 1000,
    target: '#header'
});

移動後に関数実行

$('a[href^="#"]').smoothAnchor({
    easing: 'easeOutQuart',
    speed: 1000,
    target: '#header',
    complate:'test'
});

座標を指定してリンク(x, y)

#1000,1000

Options

初期設定

//ロード時の処理
$(window).smoothAnchorInit({
    easing: 'easeOutQuart',
    speed: 1000,
    complate:'',
    isLoadedSmooth: true,
    isLoadedSmoothQuestionMark: true,
    isClickStop: false,
    isTopScroll: true,
    isLeftScroll: true
});

//クリック時の処理
$('a[href^="#"]').smoothAnchor({
    easing: 'easeOutQuart',
    speed: 1000,
    delay: 0,
    target: '#header',
    complate: '',
    isAddHash: true,
    isTopScroll: true,
    isLeftScroll: true
});

  • easing: {String} イージングの種類
  • speed: {Number} speed
  • delay: {Number} delay
  • target: {String} hrefがないタグの場合の直接指定
  • complate: {Function} スクロール後の関数名
  • isAddHash: {Boolean} スクロール後にhashを追加するか
  • isTopScroll: {Boolean} 縦方向にスクロールするか
  • isLeftScroll: {Boolean} 横方向にスクロールするか
  • isLoadedSmooth: {Boolean} ロード時にトップからスムーズスクロールするか
  • isLoadedSmoothQuestionMark: ?を使っての座標指定での移動を許可するか(?100,100)
  • isClickStop: {Boolean} スムーズスクロール時にクリックした場合に処理を停止するか

コメント : 0

コメントフォーム

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/116

このページの先頭へ戻る