javascript - jQuery 中点击滚动菜单的小错误

Question

在我的网站上，我设置了一个“点击滚动”菜单，逻辑如下:

1。单击菜单链接时，滚动到相应的 anchor 并将事件类添加到 $(this)

2。 onscroll，根据当前 anchor 的位置切换事件类

这一切工作正常，但有一个小错误，当您单击链接时，页面会轻微闪烁，事件菜单链接也是如此。您可以在 http://jcwd98.appspot.com/ 上实时查看和测试它(警告它处于早期开发阶段，没有移动设备，现在看起来可能很糟糕)。

我不确定是什么导致页面闪烁，但我知道菜单链接闪烁的原因是我的代码告诉它在滚动到相应部分时向其添加一个事件类。由于文档必须先滚动一个部分才能到达所需的部分，因此它会在到达之前向其他链接添加一个事件类。

这两种情况我都不想要。

jsFiddle

代码:

var section_padding = 45;

$("#menu ul li a").on("click", function(event) {
	event.preventDefault;

	$("#menu ul li a.active").removeClass("active");
	$(this).addClass("active");

	var target = this.hash;
	var menu = target;
	var cache_target = $(target);
	var buffer = (cache_target.offset().top - section_padding);

	$("html, body").stop().animate({
		"scrollTop": buffer
	}, 400, "swing");

});

function scroll(event) {
	var scroll_pos = $(document).scrollTop();
	$("#menu ul li a").each(function() {
		var cur_link = $(this);
		var ref_el = $(cur_link.attr("href"));

		if( ref_el.position().top <= scroll_pos && ref_el.position().top + ref_el.height() + (section_padding * 2) > scroll_pos ) {
			$("#menu ul li a").removeClass("active");
			cur_link.addClass("active");
		} else {
			cur_link.removeClass("active");
		}

	});
}

$(document).on("scroll", scroll);

* {
    margin: 0;
    padding: 0;
}

#menu {
    display: block;
    height: 50px;
    width: 100%;
    position: fixed;
    z-index: 100;
    background: rgba(255, 255, 255, .8);
}

#menu ul {
    display: block;
    width: 100%;
    height: 100%;
    list-style: none;
}

#menu ul li {
    display: block;
    box-sizing: border-box;
    height: 100%;
    width: calc(100% / 5);
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    float: left;
    text-align: center;
    line-height: 50px;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    font-family: arial;
}

#menu ul li a:hover,
#menu ul li a.active {
    background: #f0f0f0;
}

#sections {
    display: block;
    position: relative;
    top: 50px;
}

section {
    display: block;
    height: 500px;
    width: 100%;
    background: #67D182;
    padding: 45px 50px;
    box-sizing: border-box;
}

#sections section:nth-child(even) {
    background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li><a href="#top">Top</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
</nav>

<div id="sections">
    <section id="top">
      <h2>#top</h2>  
    </section>
    
    <section id="about">
      <h2>#about</h2>  
    </section>
    
    <section id="portfolio">
      <h2>#portfolio</h2>  
    </section>
    
    <section id="contact">
      <h2>#contact</h2>  
    </section>
    
    <section id="blog">
      <h2>#blog</h2>  
    </section>
</div>

如有任何帮助，我们将不胜感激。 :)

Answer 1

出现这种情况是因为preventDefault是一个函数，那么你只需要改变:

event.preventDefault;

收件人:

event.preventDefault();

这很好用。 fiddle :https://jsfiddle.net/lmgonzalves/ve5qr3bL/2/

编辑:

您需要取消绑定(bind)滚动事件，然后在动画完成时再次绑定(bind)。

$("#menu ul li a").on("click", function(event) {
    event.preventDefault();

    $(document).off("scroll"); // here unbind

    // code

    $("html, body").stop().animate({
        "scrollTop": buffer
    }, 400, "swing", function() {
        $(document).on("scroll", scroll); // here bind again
    });

});

fiddle :https://jsfiddle.net/lmgonzalves/ve5qr3bL/3/