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

时间:2017-07-23 17:44:14

标签: javascript jquery smooth-scrolling

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

当我滚动或点击任何其他导航栏列表项时,一切正常,顺利滚动到相应的部分并从上一个锚链接中删除活动类并添加到相应的。

问题是当我刷新页面类活动时,活动类不会保留在应该存在的位置,但它被分配给#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");
    }
  });
}

1 个答案:

答案 0 :(得分:0)

看起来您使用answer并忘记在点击时移除课程。

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