如果标题是常见的，如何使标题菜单平滑滚动？

<div class="container">
  <ul class="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>
  <div id="section1" class="section">Section 1 Content</div>
  <div id="section2" class="section">Section 2 Content</div>
  <div id="section3" class="section">Section 3 Content</div>
</div>

.container {
  height: 1000px; /* 设置容器高度，以便滚动效果可见 */
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
}

.section {
  height: 500px; /* 设置内容区域高度，以便滚动效果可见 */
  margin-bottom: 20px;
}

// 获取标题菜单和内容区域的元素
var menuItems = document.querySelectorAll('.menu a');
var sections = document.querySelectorAll('.section');

// 监听标题菜单的点击事件
menuItems.forEach(function(item) {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的跳转行为

    // 获取目标内容区域的位置信息
    var targetId = item.getAttribute('href');
    var targetSection = document.querySelector(targetId);
    var targetOffsetTop = targetSection.offsetTop;

    // 执行平滑滚动效果
    smoothScroll(targetOffsetTop);
  });
});

// 平滑滚动函数
function smoothScroll(targetOffsetTop) {
  var startPosition = window.pageYOffset; // 当前滚动位置
  var distance = targetOffsetTop - startPosition; // 滚动距离
  var duration = 1000; // 滚动持续时间

  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) {
      startTime = currentTime;
    }

    var elapsedTime = currentTime - startTime;
    var scrollPosition = ease(elapsedTime, startPosition, distance, duration);

    window.scrollTo(0, scrollPosition);

    if (elapsedTime < duration) {
      window.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;
  }

  window.requestAnimationFrame(animation);
}