jQueryでスムーズスクロールプラグイン

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

スムーズにスルスルっとスクロールするJavascriptを使うときに「どれを使おう!?」っていつも迷うので、自分にあったものをjQueryのアニメーション機能を使って作ってみました!


2011-09-17
スクロール途中、マウススクロールしたときにスクロールをストップする機能を追加。
2011-04-30
アクセス時ページの先頭からその場所までスムーズに移動できる機能を追加。
移動後に関数を実行する機能を追加。

jQueryanimatejQuery Easingプラグインを組み合わせて、面白い動きもできるようにしています。

仕様

使い方

head内でjQueryとsmoothAnchorを読み込むだけです。順番はjQueryを先に読み込んでください。

注意 : HTMLとsmoothAnchor.jsの文字コードをあわせてください。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/smoothAnchor.js"></script>
初期状態
$('a[href^="#"]').smoothAnchor();

と記述していますので、変更の際はこちらを変更してください。 a[href^="#"]というのはa要素のhref最初の文字"#"が含まれている時に実行ということです。

a要素以外につけたい場合
$('h1').smoothAnchor({easing : 'easeOutQuart',speed : 1000,target: '#header'});

easing、speed、targetを指定できるようになっていますので、a要素以外の場合はtargetを指定してください。指定がなかった場合#headerに飛ぶようになっています。初期設定の飛び先もsmoothAnchor.jsで簡単に変更できます!

また、targetの指定に「#1000,1000」(left,top)などと座標を指定してその場所に飛ばすこともできます!

Flashから実行する場合
ExternalInterface.call("smoothAnchor",{easing : "easeOutElastic",speed : 1000,target : "#header"});

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

アクセス時のスムーズスクロール
if(location.hash.charAt(0) == "#") {
	$(pageWrapTag).animate({ scrollTop : 0,scrollLeft : 0 }, 0, 0);
	smoothAnchor({easing : 'easeOutQuart',speed : 1000, target : location.hash});
	
	//WebKit系で上へ飛ばなかったための処理
	if (navigator.userAgent.indexOf("WebKit") != -1){location.hash = ""}
}

「#」を「?」にしても機能します。

Javascriptでもコメントで書いてありますが、上の記述を削除すればアクセス時にスムーズスクロールしなくなります。

移動後の関数の実行
$('a[href^="#"]').smoothAnchor({easing : 'easeOutQuart',speed : 1000,target: '#header',func:'test'});

test関数を実行します。

初期設定
easing : 'easeOutQuart'
speed : 1000
target: '#header'
指定できるeasing
linear, swing, jswing
easeInQuad, easeOutQuad, easeInOutQuad
easeInCubic, easeOutCubic, easeInOutCubic
easeInQuart, easeOutQuart, easeInOutQuart
easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo
easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic
easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce

動きは下記で確認できます!

動作環境

  • IE6
  • IE7
  • IE8
  • Firefox
  • Opera
  • Safari
  • Chrome

こちら参考にさせていただきました。

コメント : 2

コメントフォーム
ふづき : 2010年10月12日 (火) 20:37

詳しい・・・ww

凄いw さすが社会人!!


後、サンプル楽しいですねww

動く動くw

takamas : 2010年11月12日 (金) 17:04

delayを指定できるようにバージョンアップしていただけないでしょうか。
できたらレバ刺しおごります。

あと、モーションコンプリート時に関数実行できたりしますか?
できたらビールもつけます。

トラックバック : 0

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

このページの先頭へ戻る