jQuery实现楼层滚动效果

jQuery实现楼层滚动效果

css部分

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 800px;
        height: 600px;
        margin: 0 auto;
    }

    div:nth-child(1){
        background-color: teal;
    }

    div:nth-child(2){
        background-color: rgb(40, 75, 59);
    }

    div:nth-child(3){
        background-color: rgb(99, 102, 61);
    }

    div:nth-child(4){
        background-color: rgb(85, 53, 92);
    }

    div:nth-child(5){
        background-color: firebrick;
    }

    .floor{
        width: 40px;
        height: 200px;
        background-color: gold;
        position: fixed;
        left: 10px;
        top: 200px;
    }

    .floor span{
        display: block;
        width: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #ccc;
        font-size: 20px;
        border: 1px solid #fff;
        box-sizing: border-box;
        cursor: pointer;
    }
</style>

HTML部分：

  <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <p class="floor">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </p>

jQuery部分：

<script src="../jquery.min.js"></script>

    <script>
         /* 
        需求: 点击楼层span, 让滚动滚动到对应楼层
        原理: 
            1. 获取当前点击楼层span对应的楼层盒子div距离文档顶部的偏移sTop
            2. 设置滚动条滚动的距离为sTop
    */

    $('.floor span').click(function(){
        let index=$(this).index()
        let sTop=$('div').eq(index).offset().top
        $('html').animate({scrollTop:sTop},500)
    })
    </script>