如何使垂直导航栏的文本在打开时停留在同一位置？

<ul class="vertical-nav">
  <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>

.vertical-nav {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* 其他样式设置 */
}

document.addEventListener('DOMContentLoaded', function() {
  var navLinks = document.querySelectorAll('.vertical-nav a');
  
  for (var i = 0; i < navLinks.length; i++) {
    navLinks[i].addEventListener('click', function(e) {
      e.preventDefault();
      
      var target = document.querySelector(this.getAttribute('href'));
      var offsetTop = target.offsetTop;
      
      window.scrollTo({
        top: offsetTop,
        behavior: 'smooth'
      });
    });
  }
});