【jQuery】備忘録:ページ内スクロールを滑らかに

何の変哲もない処理ですが、備忘録として。
(IE9, Firefox10, Opera11, Chrome17, Safari5)

【HTML】
<ol id="index">

  <li><a href="#01">項目1</a></li>

  <li><a href="#02">項目2</a></li>

  <li><a href="#03">項目3</a></li>

</ol>

<section id="01">

  ...

  <a class="back" href="#index">目次へ</a>

</section>

<section id="02">

  ...

  <a class="back" href="#index">目次へ</a>

</section>

<section id="03">

  ...

  <a class="back" href="#index">目次へ</a>

</section>

【jQuery】
var indexScroll = function(selector) {

  $(selector).click(function(e){

    var id = $(e.target).attr('href');

    $('html, body').animate({scrollTop : $(id).offset().top});

  });

};

jQuery(document).ready(function($) {

  indexScroll('#index a, .back');

});

【注意点】

スクロール完了後の処理を書いてると、二重に実行されます(-_-;)

【参考】
jQueryで画面をスクロールさせる時の注意点
http://less.carbonfairy.org/post/941824993

とはいえ、Webkit系とそれ以外とで分岐させる際に、非推奨の『$.browser』は使うべきではないでしょう。
そこで、下記のように判別させる必要があります。

【参考】
JavaScriptでのユーザエージェント条件分岐便利スニペット - W3G Blog Tools/Tips
http://w3g.jp/blog/tools/js_browser_sniffing

ちなみに、私はこのように加工させて頂きました。

var UA = (function(){

  var result = {};

  if (

    !document.uniqueID    &&

    !window.opera         &&

    !window.globalStorage &&

    window.localStorage

  ) result.webkit = true;

  else if (window.globalStorage) result.firefox = true;

  else if (window.opera)         result.opera   = true;

  else if (document.uniqueID)    result.ie      = true;

  else result.other = true;

  return result;

})();

IEのバージョンごとの分岐と、モバイルの判別は切り捨ててます。
私の用途ではこれで十分です。
これなら

if (UA.webkit || UA.firefox) {

とか、記述もスッキリ。感謝感謝 (-人-)