【jQuery不要】CSSだけでスムーススクロールを実装する方法【位置調整も解説】

CSS

2023年2月17日

【jQuery不要】CSSだけでスムーススクロールを実装する方法【位置調整も解説】

こんにちは、ゆうきです。

Webページでよく見かけるスムースクロール

そこで今回はCSSだけでスムースクロールを実装する方法を解説します。

1行で解決できるので参考にどうぞ。

目次

さっそく、みていきましょう。

CSSだけでスムーススクロールを実装する方法

scroll-behaviorプロパティを使うことで実装できます。

scroll-behaviorとは

ページ内リンクをクリックした時、ゆくっりスクールしながら該当箇所に移動するCSSプロパティです。

htmlタグに指定するだけ

html {
                    
   scroll-behavior: smooth; ←これだけ
                    
}

固定バーの高さ分、位置を調整したい場合

ナビゲーションメニューなど固定バーがある場合、該当箇所と固定バーが被りますよね。

そのズレを解消する指定が以下です。

html {
                    
   scroll-behavior: smooth;
   scroll-padding-top: 50px;// ←追加 ※任意の値
                    
}

scroll-behaviorの注意点

めちゃくちゃ便利ですが、注意点もあります。

  • ・すべてのページ内リンクがスムースクロールになります。
  • ・スクロールスピードは調整できません。

とは言っても便利なので使いますよね。

今回は以上です。

【初心者必見】CSS講座 〜BEMの基本〜

【初心者必見】CSS講座 〜BEMの基本〜

CSS設計の重要性からBEM記法の基本的な書き方をわかりやすく解説しています。CSSの考え方がアップロードされるので、何も考えずにCSSを書いている方は、読む価値あると思います。

関連記事

Read Later LINE