別ページからのリンクでもスムーススクロールを実装する方法

今回は別ページからのリンクでもスムーススクロールを実装する方法を紹介します。

jQueryで書いていきます。

 

別ページからでもスムーススクロールをさせるコード

以下のコードをコピペしてください。

      $(window).on('load', function() {
        var url = $(location).attr('href');
        if (url.indexOf("#") != -1) {
          var anchor = url.split("#");
          var target = $('#' + anchor[anchor.length - 1]);
          if (target.length) {
            var pos = Math.floor(target.offset().top) - 80;
            $("html, body").animate({
              scrollTop: pos
            }, 500);
          }
        }
      });

 

これだけ別ページからのスムーススクロールが可能です。

jQuery本体を最初に読み込むのを忘れずに!