刷新页面后保持锚链接活动类（平滑锚滚动）

Question

我需要一些帮助，如何在刷新页面后保持当前锚链接处于活动状态。实际上，我有这个垂直导航栏菜单（http://prntscr.com/fz9yct），默认情况下我将活动类添加到<a href="#home">，所以当我们打开页面时，导航栏看起来就像你在屏幕截图中看到的那样。

当我滚动或单击任何其他导航栏列表项时，一切正常，平滑滚动到适当的部分并从前一个锚链接中删除活动类并添加到适当的部分。

问题是当我刷新页面类活动时，活动类不会保留在应有的位置，而是分配给#home 锚链接，尽管内容保持在刷新前的位置。你能帮我解决这个问题吗？

我尝试了$(window).on('beforeunload', function() { 的一些解决方案，但不起作用

<div class="main-menu-container">
  <nav class="main-menu" id="navbar" aria-label="Main Menu">
    <ul role="menubar" class="center">
      <li class="menubar__item">
        <a href="#home" class="active block" title="Home">
          <span class="menubar__item--icon block">
                  SVG ICON HERE
                </span>
          <span class="menubar__item--text">Home</span>
        </a>
      </li>
      <li class="menubar__item">
        <a href="#about" class="block" title="About">
          <span class="menubar__item--icon block">
                  SVG ICON HERE
                </span>
          <span class="menubar__item--text">About</span>
        </a>
      </li>
      <li class="menubar__item">
        <a href="#experience" class="block" title="My Experience">
          <span class="menubar__item--icon block">
            SVG ICON HERE
                </span>
          <span class="menubar__item--text">Experience</span>
        </a>
      </li>
      <li class="menubar__item">
        <a href="#services" class="block" title="What I provide">
          <span class="menubar__item--icon block">
                  SVG ICON HERE
                 </span>
          <span class="menubar__item--text">Services</span>
        </a>
      </li>
      <li class="menubar__item">
        <a href="#contact" class="block" title="Get in touch">
          <span class="menubar__item--icon block">
                  SVG ICON HERE
                </span>
          <span class="text">Contact</span>
        </a>
      </li>
    </ul>
    <!-- /.menubar end -->
  </nav>
  <!-- /.main-menu end -->
</div>
<!-- / .main-menu-container end -->

$(document).ready(function() {
  $(document).on("scroll", onScroll);

  $('a[href*="#"]:not([href="#"])').click(function() {

    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');


      if (target.length && $(this).attr("href") == '#home') {
        $("html, body").animate({
          scrollTop: target.offset().top
        }, 1000);
      } else {
        $("html, body").animate({
          scrollTop: target.offset().top + 2
        }, 1000);
      }
      return false;
    }
  });
});

function onScroll(event) {
  var scrollPos = $(document).scrollTop();
  $('#navbar a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.offset().top <= scrollPos && refElement.offset().top + refElement.height() > scrollPos) {
      $('#navbar ul li a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}

Answer 1

看起来您使用了 answer 并在单击时忘记删除类。

  $('a').each(function () {
        $(this).removeClass('active');
  })
  $(this).addClass('active');