页面刷新时如何保持导航链接的active状态？

原脚本已实现滚动到对应ID位置时为导航链接添加current_yes样式，但页面刷新后，active样式会重置为第一个导航链接，无法匹配当前页面的滚动位置或URL锚点。

解决方案 #

将导航active状态的计算逻辑封装为独立函数，在页面加载完成后主动执行一次，同时保留滚动时的触发逻辑；另外针对URL中的锚点，补充自动滚动到对应位置并同步导航状态的逻辑。

修改后的完整代码 #

JavaScript 代码

$(document).ready(function() {
  // 平滑滚动逻辑（仅匹配锚点链接）
  $('a[href^="#"]').click(function() {
    const target = $($(this).attr('href'));
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 500);
      return false;
    }
  });

  // 缓存选择器
  var topMenu = $("li.nav-item"),
    topMenuHeight = topMenu.outerHeight() + 15,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function() {
      var item = $($(this).attr("href"));
      if (item.length) {
        return item;
      }
    });

  // 封装更新导航active状态的函数
  function updateActiveNav() {
    var fromTop = $(window).scrollTop() + topMenuHeight;

    var cur = scrollItems.map(function() {
      if ($(this).offset().top < fromTop)
        return this;
    });
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";
    
    menuItems
      .parent().removeClass("current_yes")
      .end().filter("[href='#" + id + "']").parent().addClass("current_yes");
  }

  // 页面加载时立即执行，处理刷新后的初始状态
  updateActiveNav();

  // 绑定滚动事件，滚动时更新状态
  $(window).scroll(function() {
    updateActiveNav();
  });

  // 处理URL锚点：刷新时若URL带锚点，自动滚动到对应位置并同步导航
  const hash = window.location.hash;
  if (hash && $(hash).length) {
    $('html, body').scrollTop($(hash).offset().top);
    updateActiveNav();
  }
});

HTML 代码（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">
      <a href="#to-top" class="nav-link">Hem</a>
    </li>
    <li class="nav-item">
      <a href="#about" class="nav-link">Om</a>
    </li>
    <li class="nav-item">
      <a href="#services" class="nav-link">Tjänster</a>
    </li>
    <li class="nav-item">
      <a href="#projects" class="nav-link">Projekt</a>
    </li>
    <li class="nav-item">
      <a href="#contact" class="nav-link">Kontakta</a>
    </li>
  </ul>
  <div class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</nav>

关键改动说明 #

1. 逻辑封装复用：将原滚动事件内的状态计算逻辑提取为updateActiveNav()函数，避免代码冗余
2. 初始状态触发：页面加载完成后立即调用状态更新函数，直接根据当前滚动位置设置正确的active样式
3. 锚点处理增强：新增URL锚点检测逻辑，刷新时若URL包含锚点，自动滚动到对应元素并同步导航状态
4. 滚动逻辑优化：平滑滚动选择器限定为href^="#"的锚点链接，避免影响外部跳转链接

内容的提问来源于stack exchange，提问作者Patrik Idén