jquery锚点跳转

Posted 2020-10-31 一梦_浮生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery锚点跳转相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin:0;
    padding:0;
    }
        ul{
            position: fixed;
            left: 0;
            top: 30%;
        }
        li{
            height: 40px;
            line-height: 40px;
            list-style: none;
            width: 100px;
            text-align: center;
            background: #f01;
            color: #ffffff;
            cursor:pointer;
        }
        a{
            color: #ffffff;
            text-decoration: none;
        }
        #a1{background: #fff;border: 1px solid #ddd;
            height: 900px;
            width: 90%;
            margin-left: 10%;
        }
        #a2{background: #fff;border: 1px solid #ddd;
            height: 900px;
            width: 90%;
            margin-left: 10%;
        }
        #a3{background: #fff;border: 1px solid #ddd;
            height: 900px;
            width: 90%;
            margin-left: 10%;
        }
        #a4{background: #fff;border: 1px solid #ddd;
            height: 900px;
            width: 90%;
            margin-left: 10%;
        }
        #a5{background: #fff;border: 1px solid #ddd;
            height: 900px;
            width: 90%;
            margin-left: 10%;
        }
        .active{
            background: #ddd;
        }
        .active>a{
            color: #000;
        }
        #LouDao{
            display: none;
        }
        #main{
            overflow: hidden;
        }
    </style>
</head>
<body>
<ul id="LouDao">
    <li><a>第一章</a></li>
    <li><a>第二章</a></li>
    <li><a>第三章</a></li>
    <li><a>第四章</a></li>
    <li><a>第五章</a></li>
</ul>
<div style="height:300px;"></div>
<div id="main">
    <div id="a1">1 这是一个悲惨的故事</div>
    <div id="a2">2 这是一个欢快的故事</div>
    <div id="a3">3 这是一个伤心的故事</div>
    <div id="a4">4 这是一个幸福的故事</div>
    <div id="a5">5 这是一个狗血的故事</div>
</div>
<footer>
    <div style="height: 900px;width: 100%">底部</div>
</footer>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    var daohang=$("#LouDao");//楼层标签
    var li=$("#LouDao>li");//获取目录li
    var main=$("#main>div");//文章主要内容
     $(window).scroll(function() {
        //获取到页面总高度
        var HeightAll = $("html,body").height();
        //获取滚动条位置
        var iTop = $(window).scrollTop();

        for(var i=0;i<main.length;i++){
            //楼层的显示和隐藏
            if(iTop>=main[0].offsetTop){
                daohang.show();
            }else{
                daohang.hide();
            };
            //楼层的联动
            var num=0;
            for(var i=0;i<main.length;i++){
                if(iTop>=(main[i].offsetTop)-100){
                    num=i;
                }
                li[i].className=‘‘;//设置li中的class为空
               //main[i].style.padding=‘35px 0 0 0‘;
            };
            li[num].className=‘active‘;
            //main[num].style.padding=‘65px 0 0 0‘;
            for(var i=0;i<li.length;i++){
                li[i].onclick=function(){
                    for(var j=0;j<li.length;j++){
                        if(this==li[j]){
                        console.log(li[j]);
                            var t = main.eq($(this).index()).offset().top;
                            console.log(t);
                            //alert(t);
                            //$(".louti").addClass("ommm");
                            $("html,body").animate({
                                //scrollTop:main[j].offsetTop
                                "scrollTop": t-100
                            },500);
                            
                            
                        }
                    }
                }
            }
            
        }
    });
</script>
</html>

以上是关于jquery锚点跳转的主要内容，如果未能解决你的问题，请参考以下文章

jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）经典