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');})})

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

関連する記事

同じカテゴリーの記事

• 画像や透過背景を使ったパワーポイントをpdfにすると画像が消えたり汚くなってしまう現象を回避するクレバーな方法
• Facebook SDK v5 for PHPを使ってFacebookページに自動投稿する方法
• PHPでGoogle検索１位のURLを自動的に取得する方法
• JavaScriptのDateオブジェクトのmonth系が0から始まる仕様に溜飲を下げた雨の午後
• 【WordPress】AJAXで次ページを読み込む「jQuery.autopager」をWordPressで活用する方法
• 【WordPress】投稿の定型文（雛形）を作れるプラグイン「simple-post-template」の紹介と文字化け対応策
• 【WordPress】アップロード画像の切り抜き基準点を「中心」から「左上」にする方法
• FireFox20でHTMLを正しく解釈しない件＆19.0.2へのダウングレード方法
• 指定した文字数で文字列をまるめるPHPの関数 mb_strimwidth で、第4引数に「文字列をまるめた後に付加する文字列を指定」する際、色々気を付けないと文字化けるよ、というお話。
• Google Maps APIとPHPを使って郵便番号から住所や緯度経度を取得する方法

コメントを投稿する

smkn

(1979 / 5.22 / ♂)