JQuery 页面书签（锚点跳转导航）

最新推荐文章于 2024-09-19 07:04:32 发布

weixin_30379911

最新推荐文章于 2024-09-19 07:04:32 发布

阅读量359

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ych800/p/7780428.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面滚动</title>
    <script src="./js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <style>
        *{  padding:0;  margin:0; }
        body{overflow-y: auto;}
        .content .item{
            width:100%;height:500px;margin-bottom:20px;border:1px solid #999;background: rosybrown;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .nav_list{
            position: fixed;
            right:0;
            top:20%;
            min-width:200px;
            padding:10px 20px;
            background: #fff;
            border-radius: 10px;
        }
        .nav_list .item{
            padding:5px 0;
            border-left: 2px solid #ccc;
        }
        .nav_list .item.active,
        .nav_list .item:hover{
            border-left-color:cornflowerblue ;
        }
        .nav_list .item a{
            color:#999999;
            text-decoration: none;
        }
        .nav_list .item.active a,
        .nav_list .item:hover a{
            color:cornflowerblue;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="item" id="box1"><h1>盒子1...</h1></div>
    <div class="item" id="box2"><h1>盒子2...</h1></div>
    <div class="item" id="box3"><h1>盒子3...</h1></div>
    <div class="item" id="box4"><h1>盒子4...</h1></div>
    <div class="item" id="box5"><h1>盒子5...</h1></div>
</div>

<ul class="nav_list">
    <li class="item active"><a href="#box1">盒子1</a></li>
    <li class="item"><a href="#box2">盒子2</a></li>
    <li class="item"><a href="#box3">盒子3</a></li>
    <li class="item"><a href="#box4">盒子4</a></li>
    <li class="item"><a href="#box5">盒子5</a></li>
</ul>

<script type="text/javascript">
    $('.nav_list .item').on('click',function (e) {
        $(this).addClass('active').siblings().removeClass('active');
        var itemTop = $($(this).children().attr('href')).offset().top;
        $('html,body').animate({scrollTop: itemTop +'px'}, 1000);
    })

    $(function () {
        var tempTop = 0,wTop = 0,index = 1;
        $(window).scroll(function (e) {
            var nav = $('.nav_list .item');
           tempTop = $(this).scrollTop();

            if(tempTop > wTop){//向下滚动
                if( $(document.body).get(0).scrollHeight - $(this).height() - $(this).scrollTop() <=50 ){
                    nav.last().addClass('active').siblings().removeClass('active');
                    index = nav.size();
                    return;
                }

                if(index < nav.size()) {
                    if (tempTop >= $(nav.eq(index).children('a').attr('href')).offset().top) {
                        nav.eq(index).addClass('active').siblings().removeClass('active');
                        index++;
                    }
                }

            }else{//向上滚动
                if(index <= nav.size()){
                    if( tempTop <= $( nav.eq(index-1).children('a').attr('href') ).offset().top ){
                        if(index>0){
                            nav.eq(index-1).addClass('active').siblings().removeClass('active');
                            index-- ;
                        }
                    }
                }
            }
            setTimeout(function(){ wTop = tempTop;},0);
        });
    })
</script>
</body>
</html>