cssのみでスムーススクロール実装

MARKLEAPS

2023.10.26

CSSのscroll-behaviorプロパティを使えば、JavaScript（jQuery）を使わずに、cssだけでスムーススクロールを実装できます。

scroll-behaviorプロパティの使い方

html {
	// スムーススクロールなし
	scroll-behavior: auto;

	// スムーススクロールあり
	scroll-behavior: smooth;
}

html {

// スムーススクロールなし

scroll-behavior: auto;

// スムーススクロールあり

scroll-behavior: smooth;

}

scroll-behavior: smooth;
をhtml要素に1行追加するだけでスムーススクロールを実現出来ます。

ヘッダー固定時の位置調整

position: fixed; などでヘッダーを固定していると、ヘッダーと移動先の要素が被ってしまいます。

以下のように指定するとスクロール位置をずらすことができます。

html {
	scroll-padding-top: 80px; //headerと同じ高さ
	scroll-behavior: smooth;
}

html {

scroll-padding-top: 80px; //headerと同じ高さ

scroll-behavior: smooth;

}

さらに、ヘッダーの高さをcss変数で定義しておくことで、ヘッダーの高さを変える場合でも、css変数の値を変えるだけで、headerとscroll-padding-topの値を同時に変更できます。

:root {
	--header-height: 80px;
	scroll-padding-top: var(--header-height);
}

html {
	scroll-behavior: smooth;
}

header {
	height: var(--header-height);
}

:root {

--header-height: 80px;

scroll-padding-top: var(--header-height);

}

html {

scroll-behavior: smooth;

}

header {

height: var(--header-height);

}

scroll-behavior プロパティの注意点

・移動速度の調整ができない
scroll-behavior プロパティは移動速度の調整ができません。
移動速度を調整したい場合はJavaScriptを使う必要があります。

・URLにアンカーリンク(#section01など)がつく
アンカーリンク先の見出しに id=”section01″ を付けた場合は、URLが exsample.com/index.html#section01 となります。
JavaScriptでURLを取得して状態変化を付けたい場合などは影響が出てしまう可能性があります。

CSS