スムーズにスクロールするjQuery プラグイン
- Data
- 2016/07/31
- Tag
新しく今プラグインを作りなおしました。
http://qiita.com/kamem/items/c94c4dc75516b36f3766
スムーズスクロールを実装したいときに、この機能はないのかなぁ・・。とか探したりするのが大変だったので、自分のなかで必要なきのうを切り替えて使えるスムーズルクロールをjQueryのanimateのscrollTop,scrollLeftをつかってjQuery Pluginを作ってみました!
前々からつくってはいたのですが、昔つくっていた拙いコードが残っていたので少し整理しました。
仕様
- アンカーで飛んだあとアドレスもちゃんと変更。
- 座標を指定してのページ内リンク。
- アクセス時、座標アンカーがついている場合その位置に移動します。
- アクセス時ページの先頭からその場所までスムーズに移動できるようにすることもできます。
- 移動後の関数実行
- スクロール途中、マウススクロールしたときにカクカクした動きをする問題をスクロールをストップすることで回避。
使い方
<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} スムーズスクロール時にクリックした場合に処理を停止するか