锚点点击导航 跳转到相应位置，样式随之变化

// 锚点点击导航导航样式变化
			$("#nav-box li a").click(function () {
			    $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);
				$("#nav-box li").each(function(){
					$this = $(this);
					if($this[0].href==String(window.location)){
						$("#nav-box li").removeClass("on");
						$this.addClass("on");
					}
				});
				return false;//不要这句会有点卡顿
			});

　　

<div class="nav" >
			<ul class="menu" >`
				<li class="on"><a href="#section1">text1-nav</a></li>
				<li><a href="#section2">text2-nav</a></li>
				<li><a href="#section3">text3-nav</a></li>
			</ul>
		</div>
		<div >
			<div >text1</div>
			<div >text2</div>
			<div >text3</div>
		</div>