js jq爬楼梯效果 鼠标滚动 点击回到顶部 点击左边楼层切换

// 引入jQuery
    <script src="../js/jquery-3.2.1.js"></script>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }

        #menu {
   
            position: fixed;
            top: 25%;
            left: 40px;
            width: 30px;
            border: 1px solid;
        }

        #menu ul li {
   
            position: relative;
            width: 30px;
            height: 30px;
            list-style: none;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            cursor: pointer;
            border-bottom: 1px dotted #AAAAAA;
        }

        #menu ul li.last {
   
            background: #ccc;
            color: black;
            border-bottom: none;
        }

        #menu ul li span {
   
            display: none;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            color: red;
        }

        #menu ul li:hover span {
   
            display: block;
            background: darkred;
            color: white;
        }

        #menu ul li span.active {
   
            display: block;
            background: darkred;
            color: white;
        }

        #menu ul li:hover span.active {
   
            display: block;
            background: darkred;
            color: white;
        }

        #header,
        #main,
        #footer {
   
            margin: auto;
            width: 1000px;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            line-height: 500px;
        }

        #main div {
   
            height: 700px;
            font-size: 50px;
            color: honeydew;
            line-height: 700px;
        }

        #header {
   
            height: 500px;