【jQuery】スムーススクロールの実装方法 (相対パス / 絶対パス)

jQueryでのスムーススクロールの実装の実装方法をご紹介。

スムーススクロールとは？

スムーススクロールとはページ内アンカーにスクロールで移動するイメージです。

動きでいう下記のようなイメージです。

スムーススクロールの実装方法 (相対パス)

jQueryコード

下記で実装が可能です。

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

 

HTMLコードサンプル

<!-- リンク -->
<a href="#link01">リンク1</a>

<!-- 移動先 -->
<div id="link01"></div>

 

クリックする際のリンクにはhrefに移動先のidを’#link01’という形で指定してください。

移動先には上記に対応したidをid=”link01″と記述してください。

（※idは任意の英数字なので、link01以外の文字でも大丈夫です。）

 

絶対パスでの指定方法

上記は相対パスでの指定方法でした。

ただ、絶対パスで指定したいという場合もあるのではないでしょうか？

その場合は下記になります。

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

 

$(‘a[href^=”#”]’)を、$(“a[href*=’#’]”)に変更してください。

 

HTMLコードサンプル

<!-- リンク -->
<a href="http://sample.com/#link01">リンク1</a>

<!-- 移動先 -->
<div id="link01"></div>

 

以上です!

最後まで閲覧していただき、ありがとうございました。