纯css实现首页点击导航栏滑动展示当前页面内容

实现思路

借助 a标签里的href属性 ，在所要展示的内容区域起一个id ，通过点击a标签查找id展示，在html上用scroll-behavior: smooth;使过度平滑

html部分

 <!-- 导航栏  -->
<ul class="nav">
      <li>
        <a href="#home">Home</a>
      </li>
      <li>
        <a href="#about">about</a>
      </li>
      <li>
        <a href="#portfolio">Portfolio</a>
      </li>
      <li>
        <a href="#services">Services</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>

 <!-- 所要展示内容  -->
 <div class="about-area" id="about">
    <div class="text-part">
      <h1>About Area</h1>
      <p>内容</p>
    </div>
  </div>
  <div class="portfolio-area