ページ内リンクを自動判別してスムーズスクロールするjQueryコード

こんにちは、daimaです。
本日は、ページ内リンクをクリックした時に、
アニメーションつきで
スムーズにアンカー先に移動する
jQueryコードをご紹介します。

// スクロール可能な要素を判別する関数
function getFirstScrollable(selector){
  var $scrollable;

  $(selector).each(function(){
    var $this = $(this);
    if( $this.scrollTop() > 0 ){
      $scrollable = $this;
      return false;
    }else{
      $this.scrollTop(1);
      if( $this.scrollTop() > 0 ){
        $scrollable = $this;
        return false;
      }
      $this.scrollTop(0);
    }
  });

  return $scrollable;
}

//スムーズスクロール処理を行う関数
function scrollAction($target){

  //変数のセッティング
  var $win = $(window),
      $doc = $(document),
      $scrollElement = getFirstScrollable("html,body"),
      mousewheel = "onwheel" in document ? "wheel" : "onmousewheel" in document ? "mousewheel" : "DOMMouseScroll";

    var top;

    // 現在のウィンドウ幅を取得
    var w = $(window).width();

    // $targetが空の場合はキャンセル
    if( $target.size() < 1 ) return false;

    // スクロール先の位置を調整
    top = $target.offset().top;
    top = Math.min(top, $doc.height() - $win.height());

    // スクロール中は手動スクロールをキャンセルする
    $doc.on(mousewheel, function(e){ e.preventDefault(); });

    // 移動先へアニメーションする
    $scrollElement.stop().animate({scrollTop: top}, 600, "linear", function(){
      $doc.off(mousewheel);
    });
};


(function(){

  var $win = $(window),
      $doc = $(document);

    //アンカーリンクをクリックした時にアクションを起こす処理
    $doc.on("click", "a[href^=\\#]", function(e){
      var $target = $(this.hash),
          top;

      scrollAction($target);

      return false;
    });
})();

このコードが優れているのは、
読み込ませれば即、
全てのアンカーリンクに
アニメーションを追加できる点です。

ページ内リンクに
手軽にスクロールアニメーションを
付与したい場合は、
ぜひ利用してみてください。

。