CSSでスムーズスクロールを実装する方法
2021.07.06.
ページの上へ戻る場合は、アンカーリンクで移動します。
その時に滑らかな動きでページ上部へ移動すことができるCSSを紹介します。
CSSのコードは、下記のコードをCSSに追加するだけです。
■css
html {
scroll-behavior:smooth;
}
これだけでスムーズスクロールが実現できます。
ただ、すべてのアンカーリンクに対応するので、一部異なるアクションをしたい場合はJavaScriptで実装するしかありませんが、細かい設定を必要としないのであれば非常に便利なコードです。
関連の記事
-
TREVOWP
-
【追記2021/1/7】Googleがcookie規制を発表、Web広告に与える影響について
板浪雅樹
-
TREVOWP
-
衣川知秀
-
板浪雅樹
-
TREVOWP