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

Question

I need some help how to keep keep current anchor link active after refresh the page. Practically, I have this vertical navbar menu ( http://prntscr.com/fz9yct ), by default I added class active to the <a href="#home"> so when we open the page, navbar looks like as you see on screenshot.

When I scroll, or click on any other navbar list item , everything works good , smooth scroll to the appropriate section and remove class active from from the previous anchor link and add to the appropriate.

Issue is when I refresh the page class active the class active does not remain where it should be, but it is assigned to the #home anchor link, although the content stays where it was before refresh. Can you help me how to fix that ?

I tried some solution with $(window).on('beforeunload', function() { but does not work

 <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

Looks like you use that answer and forget to remove class when click.

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