カテゴリー
CSS JavaScript

Smooth Scroll

const scroll = new SmoothScroll('a[href*="#"].-scroll', {
	header: '.header',
	speed: 800,
	updateURL: false,
	// easing: 'easeOutCubic',
});

ページ読み込み時に#があった場合スクロール

if(location.hash && document.querySelectorAll(location.hash).length > 0){
  //画像読み込み完了を待つ方が良い
  window.scrollTo(0, 0);
  const scroll = new SmoothScroll();
  const anchor = document.querySelector(location.hash);
  const options = {
    speed: 2500,
   };
  scroll.animateScroll(anchor, 0, options);
}

公式サイト


CSSのみ※現状safariは効かない

html {
  scroll-behavior: smooth;
}