WEB系キャンパス

ページ内リンクをスムーズスクロールするコード覚書

ページ内リンクをパッと移動するのではなく、シューっと動くjQueryコードの覚え書き。
これで、リンクを張ってるコードは基本的にスムーズスクロールで移動する。

$(function() {
  $('a[href^=#]').click(function() {
      var speed = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
});

大本のjQueryを読み込むのをお忘れなく

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

※jQueryのバージョンによってはa[href^=#]部分の「#」にダブルクオーテーションで囲わないと動かない場合もあるので注意。

$(function() {
  $('a[href^="#"]').click(function() {
      var speed = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です