🪡
CSS1行でスムーズスクロールを実装する
実装
↓ こちらのツイート通り、CSS に
style.css
html {
scroll-behavior: smooth;
}
とするだけで、ページ内リンクをクリックした際にスムーズスクロールになります ✨
おまけ
更にスムーズスクロールについて
html タグか何かに、 CSS の scroll-padding-top というプロパティで、ヘッダーの高さ分指定してあげるとスクロール後の位置を調整できるようになります。追従するヘッダーのせいでスクロール後の位置がおかしい!って場合にはこちらを試してみて下さい 👍
Discussion