您的位置：首页 > Web前端 > JavaScript

js 按钮下一个上一个滚动效果

2016-05-03 16:00 423 查看 
.outerdiv {
width: 100%;

}
.innerdiv{
width:70px;
height: 50px;
border:1px solid green;
overflow: hidden;
float:left;

}
.outerdiv ul li {

font-size: 14px;

}

.outerdiv ul li {
width: 50px;
height: 50px;
margin: 0px 10px ;
}
.outerdiv ul li:nth-child(2n) {
background-color: red;

}
.outerdiv ul li:nth-child(2n+1){
background-color: cornflowerblue;

}

.leftdiv{
height:70px;
float: left;
margin-right: 50px;
}
.rightdiv{
height: 70px;
float: left;
margin-left:50px;
}
.centerdiv{
height: 70px;
width: 600px;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="outerdiv">
<div class="centerdiv">
<div class="leftdiv">
<input type="button" name="up" value="up">
</div>
<div class="innerdiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<div class="rightdiv">
<input type="button" name="down" value="down">
</div>

</div>

</div>

<script src="../js/libs/jquery-1.11.3.js">
</script>

<script>
$("[name=up]").bind("click",function(){
var top = $("div.innerdiv").get(0).scrollTop;
if($("div.innerdiv").get(0).scrollTop +$("div.innerdiv").get(0).clientHeight>=$("div.innerdiv").get(0).scrollHeight){
$("div.innerdiv").animate({"scrollTop":0},500);
}else{
$("div.innerdiv").animate({"scrollTop":top + 50},500);
}

});

$("[name=down]").bind("click",function(){
var top = $("div.innerdiv").get(0).scrollTop;
var maxTop =  $("div.innerdiv").get(0).scrollHeight -  $("div.innerdiv").get(0).clientHeight;
if(top ==0){
$("div.innerdiv").animate({"scrollTop":maxTop},500);
}else{
$("div.innerdiv").animate({"scrollTop":top - 50},500);
}

});
</script>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航