锚点链接及js代码实现

/**有同学出现过这种情况，要做一个楼层效果，但点击楼层中标题的时候就相关得内容出现在屏幕中心，对我而言，能使用css实现得效果尽量不会使用js来完成。**/

/*但是有些情况还是使用到，所以就css锚点链接和js都写了一下，放到一块儿，**/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{width: 100%;height: 100%;position: fixed}
        ul,ul li{list-style: none;}
        ul li{
            width: 25%;
            float: left;
            text-align: center;
            background: #45fffc
        }
        p{width: 100%;height: 800px; background: yellow;padding-top: 50px;text-align: center}
        p:nth-child(2){background: blue}
        p:nth-child(3){background: pink}
        p:nth-child(4){background: greenyellow}
        p:nth-child(5){background: #ff6f3c}
        p:nth-child(6){background: #ff4cbe}
        p:nth-child(7){background: #9ba5ff}
        p:nth-child(8){background: #ffda8b
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#mao">猫</a> </li>
    <li><a href="#gou">狗</a></li>
    <li><a href="#hu">狐狸</a></li>
    <li><a href="#lao">老虎</a></li>
</ul>
<p id="mao">【锚点】猫</p>
<p id="gou">【锚点】狗</p>
<p id="hu">【锚点】狐狸</p>
<p id="lao">【锚点】老虎</p>
<p class="one">【js】猫</p>
<p class="one">【js】狗</p>
<p class="one">【js】狐狸</p>
<p class="one">【js】老虎</p>
<!--<p id="user">点击到身份验证</p>-->
<script>
    var stop=document.documentElement.scrollHeight||document.body.scrollHeight;
    console.log(stop);
    //加入点击其中一个，先滚动到你要他点了之后出现的位置，记住stop得值。
    var lis=document.getElementsByTagName("li");
    var ps=document.getElementsByClassName("one");
    for(var i=0; i<lis.length; i++){
        lis[i].onclick=function(){
            for(var a=0;a<lis.length; a++){
                if(this==lis[a]){
                    console.log(a);
                        document.documentElement.scrollTop=ps[a].offsetTop-100;
                        document.body.scrollTop=ps[a].offsetTop-100;
                }
            }
        }
    }

 
</script>
</body>
</html>

锚点链接及js代码实现

猜你喜欢