锚点链接及js代码实现

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

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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

<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>

你可能感兴趣的:(css)