cssのみでページ内リンクへスムーズにスクロールさせる方法を見ていきます
ページ内リンクにスクロールさせる
<nav>
<div class="logo">
<h1>logo</h1>
</div>
<div class="menu">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#access">Access</a></li>
</ul>
</nav>
<section id="home">
home
</section>
<section id="about">
about
</section>
<section id="menu">
menu
</section>
<section id="access">
access
</section>
aタグのhref属性に飛び先のidを指定します。 13~16行目
飛び先のid 21,25,29,33行目
このままだと一瞬で移動してしまうので、htmlタグにscroll-behavior
プロパティを指定します。
html {
scroll-behavior: smooth;
}
cssのみでスムーズにスクロールさせる方法でした。