🪡

CSS1行でスムーズスクロールを実装する

1 min read

実装

↓ こちらのツイート通り、CSS に

https://twitter.com/mayo1201blog/status/1327475462096838662
style.css
html {
  scroll-behavior: smooth;
}

とするだけで、ページ内リンクをクリックした際にスムーズスクロールになります ✨

おまけ

更にスムーズスクロールについて
html タグか何かに、 CSS の scroll-padding-top というプロパティで、ヘッダーの高さ分指定してあげるとスクロール後の位置を調整できるようになります。追従するヘッダーのせいでスクロール後の位置がおかしい!って場合にはこちらを試してみて下さい 👍

GitHubで編集を提案

Discussion

ログインするとコメントできます