Сохранять активный класс ссылки привязки после обновления страницы (плавная прокрутка привязки)

Question

Мне нужна помощь, как сохранить текущую ссылку привязки активной после обновления страницы. Практически, у меня есть это вертикальное навигационное меню ( http://prntscr.com/fz9yct), по умолчанию я добавил активный класс в <a href="#home"> поэтому, когда мы открываем страницу, навигационная панель выглядит так, как вы видите на скриншоте.

Когда я прокручиваю или нажимаю на любой другой элемент списка панели навигации, все работает хорошо, плавно прокручиваю к соответствующему разделу, удаляю класс active из предыдущей ссылки привязки и добавляю к соответствующему.

Проблема в том, что когда я обновляю активный класс страницы, активный класс не остается там, где он должен быть, а назначается привязке #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

Похоже, вы используете этот ответ и забыли удалить класс при нажатии.

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