单击切换菜单时，页面向下滚动

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

<section id="section1">
  <!-- Section 1 content -->
</section>

<section id="section2">
  <!-- Section 2 content -->
</section>

<section id="section3">
  <!-- Section 3 content -->
</section>

nav {
  background-color: #f1f1f1;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

nav ul li a:hover {
  color: #ff0000;
}

var menuItems = document.querySelectorAll('nav ul li a');

menuItems.forEach(function(item) {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    var target = document.querySelector(this.getAttribute('href'));
    target.scrollIntoView({ behavior: 'smooth' });
  });
});