jQueryを使ったページ内スクロール : JQuery

Tweet

Pocket

jQueryを使ったページ内スクロールの覚書(jQuery v1.4.2)。

プラグインを使わない方法

下記サイトに詳しいコードが掲載されている。1箇所、jQuery.browserはjQuery 1.3からはサポート外なのでそれ以降のバージョンではjQuery.supportを使う。
» jQueryでスムーススクロール [Cool Web Window]

<script src="jquery-1.4.2.min.js" type="text/javascript" charset="UTF-8"></script>

$(function () {
  $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400;// ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $(jQuery.support.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
});

» jQuery.browser – jQuery 日本語リファレンス

プラグインを使った色々なスクロール

» ページ内スクロールのjQueryプラグインいろいろ – かちびと.net