导航有多条内容点击滚动导航栏

感觉没法描述这个特效…

这里是第一眼只能看到4条内容的，我为了让用户知道他剩下的页面在哪里，就写了当内容大于4条时点击第四条或者点击到总内容数的上一条，就让他移动一定的长度。
html:

<div class="waikuang"> <!--最外面的大框框-->
		<div class="headbtn"> <!--用来显示能够看到的内容-->
			<ul>  <!--滚动用的-->
				<div class="xuanzhong"><p>1</p></div>
				<div><p>2</p></div>
				<div><p>3</p></div>
				<div><p>4</p></div>
				<div><p>5</p></div>
				<div><p>6</p></div>
				<div><p>7</p></div>
				<div><p>8</p></div>
			</ul>
		</div>
	</div>

css:

/*---------顶部简历选择---------*/
.waikuang{
	width:100%;
	height:40px;
	overflow: hidden;
	margin-top:5px;
}
.headbtn{
	width:140px;
	height:35px;
	margin-left: auto;
	margin-right: auto;
	overflow-x: auto;
}
.headbtn ul{  /*-这里的ul其实是没有宽度的我就随便一写这里的宽度是JS控制的-*/
	width:200px;
}
.headbtn div{
	float: left;
	width:30px;
	height:30px;
	border-radius:99px;
	text-align: center;
	margin-right:5px;
	margin-left:5px;
}
.headbtn p{
	line-height:30px;
	color:#fff;
	font-size:18px;
}
.xuanzhong{
	border:1px solid #fff;
}
/*---------end顶部简历选择---------*/

JS：

$(".headbtn").children("ul").children("div").click(function(){  //点击事件
		$(this).addClass("xuanzhong");  //这个是让他点击的时候有个圈圈
        $(this).siblings().removeClass("xuanzhong"); //同上
        var numbthis = $(this).children("p").text(); //获取当前点击的是第几个
});

var numbthis = $(this).children("p").text(); //获取当前点击的是第几个
        if(dibushuju > 4 && numbthis >= 4){ //让他点击的时候滚动顶部栏
        	if(parseInt(numbthis) + 1 <= dibushuju){
        		var dianjishu = numbthis - 3;
        		$(".headbtn").animate({scrollLeft: ''+dianjishu*38.2+'px'},300); //缓慢滚动（这里滚动一下大概就是38.2）
        	}
        }else{
        	if(numbthis <= 3){
        		$(".headbtn").animate({scrollLeft: '0px'},300); //缓慢滚动
        	}
        }