楼层跳转的两种效果

在开发页面的过程中，难免会遇到楼层跳转的效果，下面给大家分享两种自己的效果，一种是js的，但是需要用到animate的函数，一种是jquery的，直接拿来用就好了。

我在这里就不用封装了，改天要用自己也可以过来看看，如果大家愿意，也可以自己封装成方法再使用。

当然网上也很多类似的插件，比我的要好很多，所以各位大神有人看到了给我改进的意见，谢谢了。

 

第一种：jquery实现的

1、先来看看html布局

 

        <div class="container">
            <div class="inner-container">
                <div class="inner">第一层</div>
                <div class="inner">第二层</div>
                <div class="inner">第三层</div>
                <div class="inner">第四层</div>
                <div class="inner">第五层</div>
                <div class="inner">第六层</div>
                <div class="inner">第七层</div>
                <div class="inner">第八层</div>
            </div>
            <div class="floor">
                <div class="btn on">第一层</div>
                <div class="btn">第二层</div>
                <div class="btn">第三层</div>
                <div class="btn">第四层</div>
                <div class="btn">第五层</div>
                <div class="btn">第六层</div>
                <div class="btn">第七层</div>
                <div class="btn">第八层</div>
            </div>
        </div>

 

 

2，再来看看我的布局；

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

.container,
.inner-container {
    width: 1000px;
}

.container {
    margin: 0 auto;
}

.container .inner {
    width: 100%;
    height: 500px;
    margin: 20px;
    line-height: 500px;
    font-size: 50px;
    background: tan;
    text-align: center;
}

.container .floor {
    width: 50px;
    height: 320px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.container .floor .btn {
    line-height: 40px;
    width: 100%;
    background: gold;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #fff;
}

.container .floor .btn.on {
    background-color: #BE0000;
}

 

3、最后看看我的jquery；

/ 获取按钮
var btn = $('.floor .btn');
// 获取楼层
var inner = $('.inner-container .inner');
// 给每个floor按钮添加点击事件
btn.on('click', function() {
    // 保存当前按钮的下标
    var Index = $(this).index();
    // 给当前的按钮添加类用来控制按钮的背景
    $(this).addClass('on').siblings().removeClass('on');
    // 设置每个floor滚动到顶部页面顶部的距离
    $('html, body').animate({
        scrollTop: $('.inner-container .inner').eq(Index).offset().top
    })
});

// 滚动监听, 给每个btn添加背景
$(document).on('scroll', function() {
    // 获取滚动条滚动的距离
    var tops = $(document).scrollTop();
    for(var i = 0; i < inner.length; i++) {
        // 如果楼层距离页面顶部的距离小于或者等于滚动条滚动的距离 + 200px时
        if(inner.eq(i).offset().top <= tops + 200) {
            // 给当前的按钮添加背景
            btn.eq(i).addClass('on').siblings().removeClass('on');
        }
    }
})

 

第二种：JavaScript实现

直接贡献JavaScript了。

            // 获取所有的按钮
            var btn = document.getElementsByClassName('btn');
            // 获取所有的楼层
            var inner = document.getElementsByClassName('inner');

            // 获取body 
            var body = document.getElementsByTagName('body')[0];

            for(var i = 0; i < btn.length; i++) {
                // 保存下标
                btn[i].index = i;
                btn[i].onclick = function() {
                    animate(body, {
                        // 给body设置向上滚动的距离
                        scrollTop: inner[this.index].offsetTop
                    }, 1000, Tween.Linear);
                    //取消所有btn的背景
                    for(var j = 0; j < inner.length; j++) {
                        btn[j].className = 'btn';
                    };
                    // 给当前的btn设置背景
                    btn[this.index].className = 'btn active';
                }
            }

            // 注册滚动监听事件
            window.onscroll = function() {
                // 获取滚动条距离页面底部的距离
                var tops = document.documentElement.scrollTop || document.body.scrollTop;
                for(var i = 0; i < inner.length; i++) {
                    if(inner[i].offsetTop <= tops + 200) {
                        //取消所有btn的背景
                        for(var j = 0; j < inner.length; j++) {
                            btn[j].className = 'btn';
                        };
                        // 给当前的btn设置背景
                        btn[i].className = 'btn active';
                    }
                }
            }

 

 

。