/**有同学出现过这种情况,要做一个楼层效果,但点击楼层中标题的时候就相关得内容出现在屏幕中心,对我而言,能使用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>