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

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");
			}
		});
	}
}

 

设置页面滚动条在最顶部：

document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

 

js获取滚动条滚动的位置：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;