点击导航缓动至滚动条对应位置，滚动页面时设置对应导航的选择状态

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代码

//如果导航被点击则值为  truevar 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");}});}}