写一个侧边导航栏+滑动电梯效果,导航栏里面再添加一个回到顶部功能,当页面变化时侧边导航栏也变化到对应的选项

HTML代码：

<div class="sidebar">
  <ul>
    <li class="active"><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
    <li><a href="#section5">Section 5</a></li>
    <li><a href="#" class="back-to-top">Back to Top</a></li>
  </ul>
</div>

<div id="section1" class="section">Section 1</div>
<div id="section2" class="section">Section 2</div>
<div id="section3" class="section">Section 3</div>
<div id="section4" class="section">Section 4</div>
<div id="section5" class="section">Section 5</div>

CSS代码：

.sidebar {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 100px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

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

.sidebar li {
  margin: 0;
  padding: 0;
}

.sidebar li a {
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #000;
}

.sidebar li.active a {
  background-color: #f0f0f0;
}

.sidebar li a.back-to-top {
  font-size: 12px;
  color: #999;
  background-color: #f0f0f0;
  border-top: 1px solid #ddd;
}

.section {
  height: 500px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

.section:nth-child(even) {
  background-color: #ddd;
}

JavaScript代码：

// 获取侧边栏和所有的导航链接
var sidebar = document.querySelector('.sidebar');
var navLinks = sidebar.querySelectorAll('a');

// 获取每个 section 元素
var sections = document.querySelectorAll('.section');

// 获取回到顶部按钮
var backToTopBtn = sidebar.querySelector('.back-to-top');

// 为每个导航链接添加点击事件
navLinks.forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认事件

    var targetId = this.getAttribute('href'); // 获取目标 section 的 ID
    var targetSection = document.querySelector(targetId); // 获取目标 section 元素

    // 滚动到目标 section
    window.scrollTo({
      top: targetSection.offsetTop,
      behavior: 'smooth'
    });

    // 将当前导航链接设置为 active
    navLinks.forEach(function(link) {
      link.parentElement.classList.remove('active');
    });
    this.parentElement.classList.add('active');
  });
});

// 监听页面的滚动事件
window.addEventListener('scroll', function() {
  var currentSection = null;

  // 找到当前可见的 section 元素
  sections.forEach(function(section) {
    if (section.offsetTop - window.innerHeight / 2 < window.scrollY) {
      currentSection = section;
    }
  });

  // 将当前 section 对应的导航链接设置为 active
  navLinks.forEach(function(link) {
    link.parentElement.classList.remove('active');

    if (link.getAttribute('href') === '#' + currentSection.getAttribute('id')) {
      link.parentElement.classList.add('active');
    }
  });

  // 如果页面滚动超过了一屏高度，则显示回到顶部按钮，否则隐藏回到顶部按钮
  if (window.scrollY > window.innerHeight) {
    backToTopBtn.style.display = 'block';
  } else {
    backToTopBtn.style.display = 'none';
  }
});

// 为回到顶部按钮添加点击事件
backToTopBtn.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认事件

  // 滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});