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

最新推荐文章于 2022-11-23 14:40:58 发布

我家小宝_朱朱

最新推荐文章于 2022-11-23 14:40:58 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zhuchunyan_aijia/article/details/51305438

版权

js 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

.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>