ページ内リンクをクリックしたとき、一瞬ではなく『なめらか』に目的の位置まで移動する…
そんな、ぬるぬると動くスムーズスクロールをCocoonでも再現したいと思いませんか？
この記事では、Cocoonにスムーズスクロールを導入する具体的な方法を紹介します。
クリックした瞬間にガクッと飛んでしまう不自然な動きを、自然で心地よい動きに変えてみましょう！
ページ内リンクのスクロールをスムーズ化させる方法
ページ内リンクをなめらかに動かす方法は、以下のコードをCSSに追加するだけ。
html {
scroll-behavior: smooth;
}CSSを追記する手順
- ダッシュボードの「外観」にある「テーマファイルエディター」を開く
- 編集するテーマを「Cocoon Child」に設定する
- テーマファイルを「Stylesheet（style.css）」に設定する
- 「選択したファイルの内容」にコードを追記する
これだけで、ページ内リンクをクリックしたときに、目的の場所までぬるぬるとなめらかに移動するようになります。
CSSだけで実装する場合の注意点
html {
scroll-behavior: smooth;
}この方法は、とにかく手軽に導入できる反面、いくつか注意点があります。
スクロール速度の調整ができない
CSSの「smooth」は、ブラウザ側がスクロール速度を自動的に決めているため、自由にスピードを変更できません。
そのため「もう少しゆっくり移動させたい」など思っても、調整できないのです。
スクロール速度を細かく調整したいときは「jQuery」で作成する必要があります。
古いブラウザでは非対応
新しい仕様のため、古いブラウザでは対応していない場合があります。
とはいえ、現在では「Chrome・Firefox・Edge・Safari」といった主要ブラウザの多くで対応済み。
従って、一般的なブログを運営されるような方であれば、これも困ることはないでしょう。
ページ内リンクのズレを補正できない
固定ヘッダーを使用しているサイトだと、ページ内リンクをクリックしたとき、移動先の見出しがヘッダーの下に隠れてしまうことがあります。
これは、ブラウザがリンク先の位置を「ページ上端」から計算しているためです。
CSSの「smooth」では、このズレを補正する機能がないため、別途「スクロール位置に余白を取る」という指定をおこなう必要があります。
例えば、以下のように「scroll-margin-top」を使えば、リンク先がヘッダーに隠れずに表示されます。
h2, h3, h4 {
scroll-margin-top: 100px;
}ただ、これではパソコンとスマホでヘッダーの高さが異なる場合、どちらかの端末で微妙にズレてしまいます。
例えば、パソコンのヘッダーは100pxでも、スマホでは80pxなどに縮んでいるケースです。
このようなときは、以下のコードを追記してください。
/* パソコン用のコード（画面幅768px以上） */
@media screen and (min-width: 768px) {
h2, h3, h4 {
scroll-margin-top: 100px;
}
}
/* スマホ用のコード（画面幅768px未満） */
@media screen and (max-width: 767px) {
h2, h3, h4 {
scroll-margin-top: 80px;
}
}html {
scroll-behavior: smooth;
}
/* パソコン用のコード（画面幅768px以上） */
@media screen and (min-width: 768px) {
h2, h3, h4 {
scroll-margin-top: 100px;
}
}
/* スマホ用のコード（画面幅768px未満） */
@media screen and (max-width: 767px) {
h2, h3, h4 {
scroll-margin-top: 80px;
}
}このように分けることで、どの端末でもリンク先の見出しが正しい位置に表示されるようになります！
まとめ｜CSSだけでも快適なスクロール体験は作れる
紹介した方法は、わずか3行でスムーズスクロールを実現できる、とても優れた方法です。
Cocoonとの相性も良く、僕自身はこのCSSで困ったことはありません。
動作が軽く、余計なコードを追加しなくていいので、テーマの動きを邪魔することがないのも良いですね。
ページ内リンクをクリックしたときの動きをぬるぬる・なめらかに変えたたいときは、ぜひ紹介したCSSを試してみてください！
コメント