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

感觉没法描述这个特效…
这里是第一眼只能看到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); //缓慢滚动
}
}