点击elevator楼梯跳转效果

    点击elevator楼梯跳转效果
    $(function () {
        var speed = 400;//自定义滚动速度
        //回到顶部
        $(".content-toolbar").click(function () {
            $("html,body").animate({"scrollTop": 0}, speed);
//            $('.content-shelter').fadeOut(100);
        });
        //回到底部
//        var windowHeight = parseInt($("body").css("height" ));//整个页面的高度

        $(".float-menu li").click(function () {
            var _ind = $(this).index();
            if (_ind == 0) {
                $("html,body").animate({"scrollTop": 401}, speed);
                showC(0);
            } else if (_ind == 1) {
                $("html,body").animate({"scrollTop": 1302}, speed);
                showC(1);
            } else if (_ind == 2) {
                $("html,body").animate({"scrollTop": 2070}, speed);
                showC(2);
            }
        });
    });
    function showC(index){

      //让第index层的数字隐藏，文字显示，
        $('.float-menu li').eq(index).find('.num').hide().siblings('.word').css({            'display': 'block',        });

     //让其他兄弟元素的li数字显示，文字隐藏
        $('.float-menu li').eq(index).siblings('.word').hide().find('.num').css({            'display':'block',        });    }

<ul class="float-menu">
    <li>
        <a class="num" href="javascript:;" style="display: none">1F</a>
        <a class="word" href="javascript:;" style="display: block">COLUMN1</a>
    </li>
    <li>
        <a class="num" href="javascript:;">2F</a>
        <a class="word" href="javascript:;">COLUMN2</a>
    </li>
    <li>
        <a class="num" href="javascript:;">3F</a>
        <a class="word" href="javascript:;">COLUMN3</a>
    </li>

</ul>

在以上的JS代码中，我们可以自定义滚动速度，speed值越大，滚动越快
var speed = 1000;
那么你的页面便实现了回到顶部和底部的功能。

在此我还要多添加一个功能，那就是滑动到指定ID的元素，语法如下。需要把scrollTop设置为

$(‘#ID’).offset().top