ページ内リンクをスムーズなスクロールにする方法

概要

通常は、ページ内リンクをクリックすると、パッと移動をしてしまいますが、
おしゃれなホームページではスルスルっと、スムーズなスクロールをすることがあると思います。

そのスムーズなスクロールを実装する方法です。

CSSで実装する場合

URLに「#」がついて遷移するため、ブラウザの「戻る」ボタンが使用できます。

また、他のページから遷移した場合もスムーズなスクロールをします。

CSS

html { scroll-behavior: smooth;}

Javascriptで実装する場合

CSSと違い、スピードを変更したり、少し位置をずらしたりなどカスタマイズが可能です。

ただし、URLに「#」がつかないで、スクロールをするだけなのでブラウザの「戻る」ボタンが使用できません。
また、他のページから直接遷移した場合はスムーズなスクロールをしません。

Javascript

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