LoginSignup
13
12

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-07-12

新しく今プラグインを作りなおしました。
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} スムーズスクロール時にクリックした場合に処理を停止するか
13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12