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

// 锚点点击导航导航样式变化
			$("#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" id="nav-container">
			<ul class="menu" id="nav-box">`
				<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 id="text">
			<div id="section1" style="100%;height:500px;background:green;text-align:center;">text1</div>
			<div id="section2" style="100%;height:500px;background:yellow;text-align:center;">text2</div>
			<div id="section3" style="100%;height:500px;background:blue;text-align:center;">text3</div>
		</div>