javascript - Small bug with click-to-scroll menu in jQuery -

on website have set "click-to-scroll" menu logic of:

1. when menu link clicked, scroll corresponding anchor , add active class $(this)

2. onscroll, toggle active class according current anchor's location

this works fine, there small bug in when click link, page flickers , active menu links. can see , test live @ http://jcwd98.appspot.com/ (warning it's in development stages, no mobile , looks pretty crappy right now).

i'm not sure causes page flicker, know reason menu links flicker because code telling add active class when scrolls on corresponding section. since document has first scroll on section desired section, adds active class other links before arrives.

i don't want either of these scenarios.

jsfiddle

code:

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 {      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>

any appreciated. :)

this happen because preventdefault function, need change:

event.preventdefault; 

to:

event.preventdefault(); 

and work fine. fiddle: https://jsfiddle.net/lmgonzalves/ve5qr3bl/2/

edit:

you need unbind scroll event, , bind again when animation completed.

$("#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/