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

Question

我需要一些帮助如何保持保持当前锚链接活动后刷新页面。实际上，我有这个垂直的navbar菜单(http://prntscr.com/fz9yct)，默认情况下，我将类active添加到中，所以当我们打开页面时，navbar看起来就像您在屏幕截图中看到的那样。

当我滚动，或单击任何其他navbar列表项，一切工作良好，平滑滚动到适当的部分，并删除类活动从上一个锚链接，并添加到适当的。

问题是当我刷新page类active时，active类并没有保持在它应该在的位置，而是分配给#home锚点链接，尽管内容保持在刷新前的位置。你能帮我把它修好吗？

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

null

<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 -->

null

null

$(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");
    }
  });
}

null

Answer 1

看起来您使用了该答案，但单击时忘记删除类。

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