ページ内リンクをスムーズなスクロールにする方法
通常は、ページ内リンクをクリックすると、パッと移動をしてしまいますが、
おしゃれなホームページではスルスルっと、スムーズなスクロールをすることがあると思います。
そのスムーズなスクロールを実装する方法です。
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;
});
});