refirio.org

HTML

HTMLは以下のとおりです。リンク先のURLに例えば #middle や #bottom を指定すると、id="middle" や id="bottom" が割り振られたタグの場所へ移動するようになります。（これ自体はjQueryではなくHTML自体の機能。）

<ul>
  <li><a href="#middle">ページの途中へ</a></li>
  <li><a href="#bottom">ページの最後へ</a></li>
</ul>

JavaScript

JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.smoothscroll.js を読み込みます。jquery.smoothscroll.js は、オプションとしてspeed（スクロールに要する時間）をミリ秒で指定すると、スムーズなスクロールにしてくれるjQueryプラグインです。

<script src="../jquery.js"></script>
<script src="jquery.smoothscroll.js"></script>
<script>
$(document).ready(function() {
  $('a[href^=#]').smoothscroll({
    speed: 500 //0.5秒かけて移動
  });
});
</script>

$('a[href^=#]') は「href 属性の先頭に # がある a タグ」という意味です。つまり、ページ内リンクすべてに対して処理を行います。

プラグイン

jquery.smoothscroll.js の内容は以下のとおりです。

(function($) {
  $.fn.smoothscroll = function(option) {
    var settings = $.extend({
      speed: 1000
    }, option);

    $(this).click(function() {
      $('html, body').animate({
        scrollTop: $(this.getAttribute('href')).length ? $(this.getAttribute('href')).offset().top : 0
      }, settings.speed);

      return false;
    });

    return this;
  };
})(jQuery);

まずは

$.fn.smoothscroll = function(option) {
  var settings = $.extend({
    speed: 1000
  }, option);

の部分でオプションを受け取ります。speedの初期値は、1000ミリ秒（1秒）としています。

$(this).click(function() {
  $('html, body').animate({
    scrollTop: $(this.getAttribute('href')).length ? $(this.getAttribute('href')).offset().top : 0
  }, settings.speed);

  return false;
});

ページ内リンクがクリックされたときに実行する処理です。

animate() は独自のアニメーション効果を作成する命令です。例えば

$('html, body').animate({ scrollTop: 0 }, 3000);

と書くと、3秒かけてページの先頭へスクロールを行います。

scrollTop もjQueryで用意されている値で、任意のスクロール位置を指定することができます。今回、スクロール位置は

$(this.getAttribute('href')).length ? $(this.getAttribute('href')).offset().top : 0

となっています。これは三項演算子と呼ばれる条件式の書き方です。

this.getAttribute('href') にはクリックされたリンクのURLが格納されていますので、今回は #middle や #bottom といった値が格納されています。また、例えば

$('#middle').length

と書くと middle というIDがページ内に使われている数を得ることができます。つまり、IDが存在すれば1以上の値が、存在しなければ0が返ってきます。

$('#middle').offset().top

と書くと middle というIDが指定されたタグが、ページの上部から何ピクセルの場所にあるかを得ることができます。

これらを組み合わせることにより、「指定されたIDは何ピクセルの場所にあるか」を調べることができます。なお、IDがなければ 0 を返すようにしています。そしてこの値を scrollTop に指定しています。

最後に、ページ内リンクをクリックするとブラウザの機能でもスクロールがされてしまいますが、return false; を指定することにより無効にしています。これでスムーズなページ内スクロールが完成です。