HighLab

aタグ の#クリック時のアニメーション

  • 公開日:
  • 更新日:
  • 文字数:730文字

velocityを使用の場合

<script>

$(function () {
  //scroll
  $('a[href^=#]').click(function () {
  var href = $(this).attr("href"),
  target = $(href === "#" || href === "" ? 'html' : href);

  target.velocity("scroll", { duration: 1200, easing: "ease", offset: -80 });
  return false;
  });
});
</script>
$(function(){
   // #で始まる出発地点をクリックした場合に処理を実行
$(function(){
   $('a[href^=#]').click(function() {
      // 出発地点の値を取得
      var href= $(this).attr("href");
      // 到着地点を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 到着地点を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, 400, 'swing');
      return false;
       });
});