<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/ecmascript">
        //使用说明  没添加一个层 就在电梯层添加一个li 就行
        $(document).scroll(function () {
            var div_height = 0;//存取div高度
            var index = 0;//存储点击的li的缩影
            var scroll_index=0;//存储滚动条在哪一个楼层的索引 
            var divs = $("body>div");//获取body下div的集合
            var scroll_top = $("body").scrollTop();//获取滚动条的位置
           // 获取滚动区域的高度   滚动条距离顶端的高度 屏幕的高度  页面可见区域的高度 
            //$("#txt").val(document.body.scrollHeight + "--" + scroll_top+"-"+screen.height+"-"+document.documentElement.clientHeight);
            for (var i = 1; i <= divs.length; i++) {
                div_height += parseInt(divs.eq(i).height());                               
                if ((scroll_top + document.documentElement.clientHeight) == document.documentElement.scrollHeight) {
                    $("ul li:last").addClass("show").siblings().removeClass("show");
                }
                else if(document.body.scrollTop==0){
                    $("ul li:first").addClass("show").siblings().removeClass("show");
                }
               else if ((scroll_top - div_height) >= 0 && (scroll_top - div_height) < parseInt(divs.eq(i + 1).height())) {
                    scroll_index = i;
                    $("ul li").eq(i).addClass("show").siblings().removeClass("show");
                    break;
                }
            }
            if (scroll_top >= divs.eq(1).height()) {//当滚动条的位置超过第一个层的高度时就显示楼梯
                $("#show").stop().animate({ "left": "0px" }, 200);
            }
            else {
                $("#show").stop().animate({ "left": "-40px" }, 200);
            }
        })
        $(function () {
            $("ul li").click(function () {
                index = ($(this).index() + 1);
                var divs = $("body>div");
                var scrollTops = 0;
                // 计算出滚动的高度
                for (var i = 1; i < index; i++) {
                    scrollTops += parseInt(divs.eq(i).height());
                }
                $("body").stop().animate({ "scrollTop": scrollTops }, 2000)
            })
        })
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

            ul li {
                height: 30px;
                border-bottom: 1px solid black;
                background-color: #2fb44e;
            }

                ul li.show.one {
                    background-color: #6b54b9;
                }

                ul li.show.two {
                    background-color: #ff6a00;
                }

                ul li.show.three {
                    background-color: #808080;
                }

                ul li.show.four {
                    background-color: #ffd800;
                }

                ul li.show.five {
                    background-color: #b6ff00;
                }

                ul li.show.six {
                    background-color: #971717;
                }

                ul li.show.seven {
                    background-color: #44b693;
                }

                ul li.show.eight {
                    background-color: #6b54b9;
                }

                ul li.show.nine {
                    background-color: #6b54b9;
                }
    </style>
</head>
<body style="">
    <div style="z-index: 1; position: fixed; top: 40%; left: -40px; width: 40px;" id="show">
        <ul>
            <li class="one">111F</li>
            <li class="two">222F</li>
            <li class="three">333F</li>
            <li class="four">444F</li>
            <li class="five">555F</li>
            <li class="six">666F</li>
            <li class="seven">777F</li>
            <li class="eight">888F</li>
            <li class="nine">999F</li>
            <li class="nine">1010</li>
        </ul>
       
    </div>
    <div style="height: 189px; background-color: #ff6a00">
        11
       1111111111111111111111111111111111111111111111
    </div>
    <div style="height: 300px; background-color: #808080"><a name="2">22222222222222222</a></div>
    <div style="height: 215px; background-color: #793535"><a name="3">33333333333333333</a></div>
    <div style="height: 30px; background-color: #b6ff00"><a name="4">444444444444444</a></div>
    <div style="height: 595px; background-color: #652626"><a name="5">555555555555555</a></div>
    <div style="height: 300px; background-color: #73268a"><a name="6">666666666666666</a></div>
    <div style="height: 200px; background-color: #2143a3"><a name="7">777777777777777</a></div>
    <div style="height: 455px; background-color: #2fb44e"><a name="7">87888888888888</a></div>
    <div style="height: 300px; background-color: #7621a9"><a name="7">999999999999</a></div>
    <div style="height: 365px; background-color: #b6ff00"><a name="7">1000000000</a></div>
    <div style="height: 200px; background-color: #4b4a5b">bottom</div>
</body>

</html>