电梯导航&返回顶部代码

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test1.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/test1.js"></script>

</head>
<body>
<div class="con w">

    <div class="header">
        头部
    </div>

    <div class="main">
        <div class="main-1"></div>
        <div class="main-2"></div>
        <div class="main-3"></div>
        <div class="main-4"></div>
    </div>
    <div class="tool-bar">
        <ul>
            <li ><a href="javascript:;">main-1</a></li>
            <li><a href="javascript:;">main-2</a></li>
            <li><a href="javascript:;">main-3</a></li>
            <li><a href="javascript:;">main-4</a></li>
        </ul>
    </div>
</div>
<div class="footer"></div>
<div class="back-top">
    <a href="javascript:;">顶部</a>
</div>
</body>
</html>

window.onload = function () {
    
    
    // 返回顶部
    function showBackTop() {
    
    
        var docTop = $(document).scrollTop();
        var main1Top = $('.main-1').offset().top;
        if (docTop >= main1Top) {
    
    
            $('.back-top').stop().fadeIn(10);
        } else {
    
    
            $('.back-top').stop().fadeOut(10);
        }

    }
    showBackTop()

    // 互斥锁,点击电梯导航时，不需要依次修改导航的背景颜色
    var flag = true

    $(window).scroll(function () {
    
    
        // 显示返回顶部
        showBackTop();

        // 页面超过导航趋于时，不能选中导航
        var last = $('.main').children().last();
        if ($(document).scrollTop() <= $('.main').children().eq(0).offset().top
            || $(document).scrollTop() >= last.offset().top + last.outerHeight()
        ) {
    
    
            $('.tool-bar li').removeClass('active')
        }  else{
    
    
            if (flag) {
    
     // 如果不是点击触发的，是正常的页面滚动，那么才修改导航的背景颜色
                var docTop = $(document).scrollTop();
                $('.main div').each(function (i, ele) {
    
    
                    if ($(document).scrollTop() >= $(ele).offset().top) {
    
    
                        // 这里还隐藏了一个细节,遍历的每个元素，后面的元素晚于前面的元素执行，
                        // 所以页面滚动触发的每一次执行这个函数，后面的排他效果会覆盖掉前面的效果,
                        // 所以只有后面的会展示出来
                        $('.tool-bar li').eq(i).addClass('active').siblings().removeClass('active')
                    }
                })
            }
        }

    })
    $('.back-top a').click(function () {
    
    
        $('html,body').animate({
    
    scrollTop:0})
    })

    // 电梯导航
    $('.tool-bar li').click(function () {
    
    
        // 点击的时候，就不必修改导航的背景色了
        flag = false
        $(this).addClass('active').siblings().removeClass('active')
        // 加个1，防止电梯导航退一格，增大容差
        $('html,body').animate({
    
    scrollTop:$('.main div').eq($(this).index()).offset().top+1},function () {
    
    
            flag = true
        })
    })

}


* {
    
    
    box-sizing: border-box;
}

ul {
    
    
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    
    
    color: #000;
    text-decoration: none;

}
body {
    
    
    margin: 0;
}
.con {
    
    
    position: relative;
}
.w {
    
    
    width: 1200px;
    margin: 0 auto;
}

.header {
    
    
    height: 200px;
    background-color: #1ba1e6;
    margin-bottom: 20px;
}

.main {
    
    
    border: 1px solid #ccc;
}

.main div[class^=main-] {
    
    
    height: 400px;
    margin-bottom: 20px;

}

.main div[class^=main-]:last-child {
    
    
    margin-bottom: 0;

}
.main div.main-1 {
    
    
    background-color: #40b83f;
}

.main div.main-2 {
    
    
    background-color: #fff7a4;
}

.main div.main-3 {
    
    
    background-color: #ff779e;
}

.main div.main-4 {
    
    
    background-color: #ff7879;
}

.footer {
    
    
    height: 50px;
    background-color: #ccc;
    margin-top: 20px;
}

.back-top {
    
    
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 150px;
    right: 50px;
    width: 40px;
    height: 40px;
    background-color: #52ee9f;
}

.tool-bar a {
    
    
    display: block;
}

.tool-bar {
    
    
    position: fixed;
    left: 50%;
    margin-left: -600px;
    transform: translateX(-105%);
    top: 200px;
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: 0 0 1px 0 rgba(0,0,0,.5);
}


.tool-bar li {
    
    
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #ccc;
}
.tool-bar li:last-child {
    
    
    border-bottom: none;
}

.tool-bar li:hover {
    
    
    background-color: rgba(0,191,255,.1) ;

}

.tool-bar ul li.active {
    
    
    background-color: deepskyblue;
}

电梯导航&返回顶部代码

猜你喜欢