JavaScript 实现网页电梯导航功能

.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; }

// 获取电梯导航元素 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' }); });

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