JQueryでページ内スクロールをする方法

2010年05月31日

以前、JQueryを使ってページのトップへスライドアップさせるという記事の変形。

前回と違うのは、複数のIDに遷移する方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname
        && this.hash.replace(/#/,'') ) {
          var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
          var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
      if ($target) {
        var targetOffset = $target.offset().top;
        $(this).click(function() {
          $('html, body').animate({scrollTop: targetOffset}, 400);
          return false;
        });
      }
    }
  });
});

アニメーションを変更したければ animate 内を好みのアニメーションにすると良いです。

コメント:0件

  1. コメントはありません。
投稿者名
E-Mail

メールアドレスは公開いたしません
URL
コメント

トラックバック:0件

  1. トラックバックはありません。
ページのトップへ

artprojectteam & festiva Tweet

Loading..