點擊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