使用 jQuery 实现简单的楼层效果

进行简单的布局

	<div class="floor box1">1</div>
    <div class="floor box2">2</div>
    <div class="floor box3">3</div>
    <div class="floor box4">4</div>
    <div class="floor box5">5</div>

    <!-- 总控制器 -->
    <ul class="floorBoss">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

<style>
        *{
            margin:0;
            padding:0
        }
        ul li{
            list-style:none;
        }
        .box1,.box2,.box3,.box4,.box5{
            width:1000px;
            height:300px;
            
            font-size:30px;
            line-height:300px;
            text-align:center;
        }
        .box1{
            background:red;
        }
        .box2{
            background:skyblue;
        }
        .box3{
            background:greenyellow;
        }
        .box4{
            background:purple;
        }
        .box5{
            background:orange;
        }
        .floorBoss{
            position:fixed;
            right:0;
            top:50px;
        }
        .floorBoss>li{
            height:100px;
            width:100px;
            border:1px solid #333;
        }
    </style>

引如 jquery 工具后，编写代码

 $(".floorBoss").children("li").click(function(){


        $("html").animate({
            scrollTop:$(".floor").eq($(this).index()).offset().top
        })
    })

因为 document 没有 animate 方法，所以动画效果要加给具体的标签，又因为运动的html 的scrollTop 属性，所以动画要加给 html。