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

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

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

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

CSSだけで実装する場合

URLに「#」がついて遷移するため、戻るボタンが使用できます。
また、他のページから遷移した場合もスムーズなスクロールをします。

CSS

html { scroll-behavior: smooth;}

リンク

• scroll-behavior – CSS: カスケーディングスタイルシート | MDN

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;
  });
});