单页滚动场景下顶部导航激活项自动滚动到首位实现问题咨询

核心实现思路 #

• 监听页面滚动事件，加节流优化避免性能损耗
• 滚动时判断当前视口对应的内容区块，给对应菜单项添加激活状态
• 每次激活状态变更时，获取激活菜单项的左偏移量，直接赋值给导航容器的scrollLeft属性，即可让激活项自动对齐导航可视区域最左侧

完整代码实现 #

HTML结构 #

<!-- 横向导航容器 -->
<div class="nav-container">
  <nav class="nav-list">
    <a href="#section1" class="nav-item">Menu 1</a>
    <a href="#section2" class="nav-item">Menu 2</a>
    <a href="#section3" class="nav-item">Menu 3</a>
    <a href="#section4" class="nav-item">Menu 4</a>
    <a href="#section5" class="nav-item">Menu 5</a>
    <a href="#section6" class="nav-item">Menu 6</a>
  </nav>
</div>

<!-- 页面内容区块 -->
<div class="content">
  <section id="section1" class="section">Section 1 内容</section>
  <section id="section2" class="section">Section 2 内容</section>
  <section id="section3" class="section">Section 3 内容</section>
  <section id="section4" class="section">Section 4 内容</section>
  <section id="section5" class="section">Section 5 内容</section>
  <section id="section6" class="section">Section 6 内容</section>
</div>

CSS样式 #

.nav-container {
  position: sticky;
  top: 0;
  overflow-x: auto;
  background: #fff;
  white-space: nowrap;
  /* 隐藏横向滚动条，不需要可删除 */
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* 如需平滑滚动可添加以下属性 */
  /* scroll-behavior: smooth; */
}
.nav-container::-webkit-scrollbar {
  display: none;
}
.nav-item {
  display: inline-block;
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
}
.nav-item.active {
  color: #2196F3;
  border-bottom: 2px solid #2196F3;
}
.section {
  height: 100vh;
  padding: 20px;
  font-size: 24px;
}

JS逻辑 #

const navContainer = document.querySelector('.nav-container')
const navItems = document.querySelectorAll('.nav-item')
const sections = document.querySelectorAll('.section')

// 节流函数，降低滚动事件触发频率，优化性能
function throttle(fn, delay = 100) {
  let timer = null
  return function(...args) {
    if (timer) return
    timer = setTimeout(() => {
      fn.apply(this, args)
      timer = null
    }, delay)
  }
}

// 激活对应菜单项并滚动导航
function updateActiveNav() {
  let currentActiveId = ''
  // 遍历所有内容区块，判断当前处于视口的区块
  sections.forEach(section => {
    const sectionTop = section.offsetTop
    // 可根据实际布局调整阈值，保证区块判断准确
    if (window.scrollY >= sectionTop - 100) {
      currentActiveId = section.getAttribute('id')
    }
  })
  // 更新菜单项激活状态
  navItems.forEach(item => {
    item.classList.remove('active')
    if (item.getAttribute('href') === `#${currentActiveId}`) {
      item.classList.add('active')
      // 核心逻辑：将导航滚动到激活项的左边缘位置
      navContainer.scrollLeft = item.offsetLeft
    }
  })
}

// 监听页面滚动事件
window.addEventListener('scroll', throttle(updateActiveNav))
// 页面初始化时执行一次，适配刷新、锚点跳转等场景
updateActiveNav()

// 原有点击菜单项滚动到对应区块的逻辑可保留，和上述逻辑无冲突

调优说明 #

• 滚动判断阈值可根据导航高度、页面布局自行调整，避免激活状态切换出现偏差
• 节流延迟时间可按需调整，100-200ms区间兼顾灵敏度和性能
• 如需导航滚动带平滑过渡效果，给.nav-container添加scroll-behavior: smooth;属性即可

内容的提问来源于stack exchange，提问作者Developer Nilesh