clover.blue

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

Data
2016/07/31
Tag

新しく今プラグインを作りなおしました。
http://qiita.com/kamem/items/c94c4dc75516b36f3766

DEMO

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

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

仕様

  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 : "easeOutElastic",speed : 1000,target : "#header"});

引数がない場合は初期設定になります。

移動後に関数実行

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

座標を指定してリンク

#1000,1000(x, y)

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} スムーズスクロール時にクリックした場合に処理を停止するか