cssのみでページ内リンクへスムーズにスクロールさせる

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のみでスムーズにスクロールさせる方法でした。