yasuko
好きなソロ曲はstereoです
ページ内リンクがスルスル～～と移動してくれると見ていて気持ちいいですよね。
そんなスムーズスクロールのおはなし。
cssだけで出来ちゃったりする？
cssのみでスムーズスクロールの実装が出来ます。
html{
scroll-behavior: smooth;
}が、しかし！！！
ChromeとFirefoxのみの対応で、Safari・IEではスムーズにいきません。
jQuery必要じゃんね～～
cssで出来ないことはjsでやっちゃいましょう。
$(function(){
$('a[href^=#]').click(function() {
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
var speed = 500;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
スムーズに移動したでしょ？！
6行目の var speed = 500;
でスクロールのスピードを指定しています。
ミリ秒での指定なので500なら0.5秒で移動します。
jQueryライブラリの読み込みもお忘れなく！
2021.4.20追記
クリッカブルマップでスムーススクロールという記事もよかったらどうぞ。