如何使用javascript创建导航菜单li？以及如何在单击菜单选项后平滑地滚动到部分？

<ul id="nav-menu">
  <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>

var menuItems = document.querySelectorAll('#nav-menu li');

menuItems.forEach(function(item) {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的跳转行为
    var targetSection = document.querySelector(this.firstChild.getAttribute('href'));
    smoothScroll(targetSection);
  });
});

function smoothScroll(target) {
  var targetPosition = target.offsetTop;
  var startPosition = window.pageYOffset;
  var distance = targetPosition - startPosition;
  var duration = 800; // 滚动持续时间，单位为毫秒
  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  // 缓动函数，可根据需要选择不同的缓动效果
  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}