2021年05月10日(月)

CSSだけでスムーズスクロールするページ内ナビゲーション

• 0
• 0
• 1
• 12

Result

See the Pen CSS Only – Smooth Scrolling Sticky ScrollSpy Navigation by kachibito
(@kachibito) on CodePen.

スクロール追従するページ内ナビゲーションのCSSオンリーvaer.です。
scroll-behaviorによるスムーズなスクロールと、ページ内ナビゲーションの現在地の明示も再現されています。

css

html { scroll-behavior: smooth; } .section-nav { width: 15em; position: fixed; top: 2rem; right: 2rem; padding-left: 0; border-left: 1px solid #ddd; background-color: rgb(0 0 0 / 0); } section:nth-of-type(even) { padding-bottom: 70rem; } section:nth-of-type(1) { background: right 2re...