我需要一些帮助如何保持保持当前锚链接活动后刷新页面。实际上，我有这个垂直的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
看起来您使用了该答案，但单击时忘记删除类。
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
