使用JS给我写一个电梯导航

以下是一个简单的电梯导航的示例代码：

HTML代码：

<div class="elevator-nav">
  <ul>
    <li><a href="#floor1">1楼</a></li>
    <li><a href="#floor2">2楼</a></li>
    <li><a href="#floor3">3楼</a></li>
    <li><a href="#floor4">4楼</a></li>
    <li><a href="#floor5">5楼</a></li>
  </ul>
</div>

CSS代码：

.elevator-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 999;
}

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

.elevator-nav li {
  margin-bottom: 10px;
}

.elevator-nav a {
  display: block;
  padding: 10px;
  background-color: #ccc;
  color: #000;
  text-align: center;
  text-decoration: none;
}

.elevator-nav a:hover {
  background-color: #aaa;
}

JavaScript代码：

// 获取电梯导航元素
var elevatorNav = document.querySelector('.elevator-nav');
// 获取楼层元素
var floors = document.querySelectorAll('[id^="floor"]');

// 监听窗口滚动事件
window.addEventListener('scroll', function() {
  // 获取当前滚动位置
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 遍历楼层元素
  for (var i = 0; i < floors.length; i++) {
    var floor = floors[i];
    var floorTop = floor.offsetTop;

    // 如果当前滚动位置超过楼层顶部位置，则将对应的电梯导航项设置为激活状态
    if (scrollTop >= floorTop) {
      var activeLink = elevatorNav.querySelector('.active');
      if (activeLink) {
        activeLink.classList.remove('active');
      }
      var links = elevatorNav.querySelectorAll('a');
      links[i].classList.add('active');
    }
  }
});

// 监听电梯导航点击事件
elevatorNav.addEventListener('click', function(event) {
  event.preventDefault();

  // 获取目标楼层的元素
  var targetId = event.target.getAttribute('href').substring(1);
  var targetFloor = document.getElementById(targetId);

  // 将窗口滚动至目标楼层位置
  var targetTop = targetFloor.offsetTop;
  window.scrollTo({
    top: targetTop,
    behavior: 'smooth'
  });
});

这段代码会在网页右侧固定一个电梯导航栏，在用户滚动到相应楼层时自动将对应电梯导航项设置为激活状态。用户点击电梯导航项时，页面会平滑滚动至对应楼层位置。