ブログ

ページ内移動をスムーズにしたい

by Yasuko

ページ内リンクがスルスル～～と移動してくれると見ていて気持ちいいですよね。

そんなスムーズスクロールのおはなし。

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追記

クリッカブルマップでスムーススクロールという記事もよかったらどうぞ。