HTML程式碼

<div class="top_dh">
<a data-href="#index" class="top_dh_in" href="#">首頁</a>
<a data-href="#ys" href="#">優勢</a>
<a data-href="#cj" href="#">成績</a>
<a data-href="#hb" href="#">夥伴</a>
<a data-href="#dz" href="#">聯絡</a>
</div>

<div id="index"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div id="ys"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div id="cj"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div id="hb"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>
<div id="dz"><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>

JS程式碼

//如果導航被點選則值為  true
var tag_checked = false;
//導航列表
var $top_dh = $(".top_dh a");
//導航 點選跳轉到  當前導航對應位置內容 效果
$top_dh.on("click",function(){
	//導航被點選
	tag_checked = true;
	$(".top_dh_in").removeClass("top_dh_in");
	$(this).addClass("top_dh_in");
	var scroll_top_demo = $(".top_dh_in").attr("data-href");
	var scroll_top_num = $(scroll_top_demo).offset().top;
	$("html,body").animate({scrollTop:scroll_top_num},"slow");
	//導航被點選  結束 改變狀態
	setTimeout(function(){tag_checked = false;},1000)
});
window.onscroll = function(){
	//滾動到導航連結處，將對應導航置為選擇狀態
	var s_top = $(window).scrollTop();
	//點選導航則不執行這裡
	if(!tag_checked){
		$top_dh.each(function() {
			var data_href = $(this).attr("data-href");
			var $tag_demo = $(data_href);
			if($tag_demo.offset().top - s_top < 0){
				$(this).siblings().removeClass("top_dh_in");
				$(this).addClass("top_dh_in");
			}
		});
	}
}