jQuery实现简单的楼层滚动

css样式： 

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 700px;
            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></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
        <p class="floor">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </p>

 jq代码：

 <script src="../lib/jquery.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>