こんにちは（・∀・）
前回のアコーディオンと同じく、今まではスムーズスクロールをするのにJavaScriptやjQueryを使って実装してきましたが、それらを使わなくともスムーズスクロールは実現することができます。
CSSだけでスムーズスクロール
CSSだけでできることが増えて来ました。今までだったらJavaScriptでの制御が必要だったことがCSSだけでできるようになると構造的にも軽くなります。
sample
それではサンプルをご覧ください。
使用するCSSは1行のみ。ただし、JavaScriptを使わないのでアンカーリンクがURLに反映してしまいます。
CSS
html{
scroll-behavior: smooth;
}
HTMLは今までと代わりはありません。
HTML
<div id="top">
(top) <a href="#mid">go to mid</a> <a href="#btm">go to btm</a>
</div>
<div id="mid">
(mid) <a href="#btm">go to btm</a> <a href="#top">go to top</a>
</div>
<div id="btm">
(btm) <a href="#top">go to top</a> <a href="#mid">go to mid</a>
</div>
よろしければぜひお試しください。
ただし、IEはともかく、Safariで非対応なのが残念です。
関連リンク
【jQuery】jQueryでスムーズスクロール
【JavaScript】JavaScriptでスムーズスクロール
参考
