どうも！フジグチです！
目次から見出しに移動する時やトップへ戻るボタンのように、ページ内をリンクで移動する時にスムーズにスクロールするのを見たことはありませんか？
当サイトでもスムーズスクロールを設定しているのですが、とても簡単なCSSのみで実装できるのでご紹介します。
スムーズスクロールのメリット
スムーズスクロールを導入するメリットとしては、ページ内をどれくらい移動したか視覚的に体感できるということだと思います。
長い記事でクリックした瞬間に目的の場所まで飛んでしまうと、戻ろうと思っても見つけられずページ内で迷子になり、諦めて読み飛ばしてしまうかもしれません。
移動した距離を視覚的に感じると、読者の方が「もう一度さっきの部分が読みたいな？」と思った場合、どれくらいスクロールすれば戻れるかが分かりやすくなるということです。
当サイトでもコピペで使える記事の中で「前の見出しの部分に書いてあります」というようなページ内リンクを記事内に入れることがあるので、そのリンクを使った時に元の場所に戻りやすいかと思い導入しました。
あとは、何となくカッコいいからです（笑）
スムーズスクロールのCSS
CSSを入れる場所を確認しておきます。
CSSの貼り付け方
スムーズスクロールのCSSは以下です。
html { scroll-behavior: smooth; }
html要素にこのCSSを適用するだけでスクロールがスムーズになります。
ビックリするほど簡単ですね。
- Safari、Opera、IEには対応していません
- テーマによっては目次のリンクが効かなくなることがあります
残念ながらSafariユーザーの皆さんにもスムーズ体験をして頂くためにはJavaScriptやjQuery等を使わなければなりませんが、このCSSを入れていても不具合が出るわけではないのでご安心を。
確認作業をしていて気付いたのですが、テーマによっては目次のリンクが効かなくなるようなので、注意してください。
- Minimalism、Brooklynは使えません。
- Haruni、UnderShirtは使えました。
※他のテーマは検証していませんので必ず確認してください
まとめ
JavaScriptやjQueryを使わないのでサイトが重くならずに、CSSも短く手軽に導入することが出来るので気になった方は使ってみてください！
