jQueryは様々なプラグインが無料で公開・配布されていて、JavaScriptに対する知識が全く無くても、それらのプラグインを導入するだけでやりたいコトが出来てしまいます。

自分もそんな恩恵に与りまくってる側ではありますが、とはいえ余りにも些細な挙動にまでプラグイン頼みにするのも、リクエスト数増えるし管理範囲も増えるし、あんまイイコトありません。

例えば、「ページのトップに戻る」みたいなボタンを押すと、そのページの最上部にスルスルっとスクロールする、みたいな挙動を実装したい場合、もちろん専用のプラグインなんかもありますが、コレなんかは特段のこだわり（加速感が欲しいとか）がないなら、今回ご紹介する方法のようにjQuery単体で完結させちゃいましょー！

ページ最上部へのスムーズスクロールを実装するjQueryのスクリプト

コレ、jQuery1.3以降は非推奨な「$.brouser」というのを使っての解説を良く見かけますが、今回は非推奨なコトはせず、いつでも安心バージョンでお届けします♪

$((navigator.userAgent.indexOf("Opera") != -1) ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop:0}, 'fast/slow/ミリ秒')

とりあえずザザッと解説から。

最初にして最難関な「(navigator.userAgent.indexOf("Opera") != -1) ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body')」の部分ですが、これは順を追って説明します。

まず、ここにはホントは「('html')」と入れたいのです。だって基本的にコレって絶対最上部のものだから。

で、実際にこの記述だと、”標準準拠モード かつ safari/chrome以外 のブラウザ”だけでしか、目的の挙動が得られません。

safari/chromeは、ココには「(’body’)」を入れないと動いてくれないんですね。ついでに後方互換モードの場合も「(’body’)」を入れれば動いてくれるので、一挙両得を狙って「(’html,body’)」という風に記述してみようと。

するってーと、珍しくココでOperaブラウザちゃんがワガママ言うんです。

そのワガママってのも「よーしパパ、html と body のどっちも有効にしちゃうぞ！」というモノ。その結果、不快なチラつきが起こったり、スクロールせず一気にページトップに行っちゃったり。

なので最終的には「Operaの後方互換モードなら’body’、Operaの標準準拠モードなら’html’、それ以外は’htmlとbody’」という条件を指定すれば全てが解決。謎は全て解けた。じっちゃんの名に賭けた。

その条件を、入れ子の三項演算子を使ってプログラム化したのが、さっきの「(navigator.userAgent.indexOf("Opera") != -1) ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body')」なのでございます。

この部分だけ分かりやすく書くと、下記のようになります。

if(navigator.userAgent.indexOf("Opera") != -1){
	if(document.compatMode == 'BackCompat'){
		var scrollTarget = 'body';
	} else {
		var scrollTarget = 'html';
	}
} else {
	var scrollTarget = 'html,body';
}

そして今回の本題となるスクロール部分ですが、これはanimate()関数でscrollTop:0の位置に行け、という命令をしてます。

とまぁうだうだ書きましたが結論、「最上部にスクロール」みたいなボタン部のクラス名を”topBtn”とした場合、実際の書き方は下記になります。

$(function(){
	$(".topBtn").click(function(){
		$((navigator.userAgent.indexOf("Opera") != -1) ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop:0}, 'slow');
	})
})

こんな感じで記述すれば、プラグイン一切使わなくてもページスクロールできちゃいますよ☆