每一个锚点都相当于一个完整的模块，正好占满一个屏幕，滚动可以直接跳转锚点，
<body> <!--头部开始--> <div id="header"> <div id="hlogo"> <div id="hlogo1"> 家维网 </div> <span id="hlogot">让家居服务更简单</span> </div> <div id="hzhan"></div> <div id="hnav"> <div id="hnavtop"> <div class="hnt">地图</div> <div class="hnt">注册</div> <div class="hnt">登录</div> </div> <div id="hnavbuttom"> <div class="hnb">首页</div> <div class="hnb">解决方案</div> <div class="hnb">专业维修</div> <div class="hnb">共享服务</div> <div class="hnb">知识分享</div> <div class="hnb">关于我们</div> </div> </div> </div> <!--头部结束--> <!--内容开始--> <div id="zhuti"> <div id="maodian"> <a href="#a1"><div class="md"></div></a> <a href="#a2"><div class="md"></div></a> <a href="#a3"><div class="md"></div></a> <a href="#a4"><div class="md"></div></a> </div> <a name="a1"></a> <div id="ztn1"></div> <a name="a2"></a> <div id="ztn2"></div> <a name="a3"></a> <div id="ztn3"></div> <a name="a4"></a> <div id="ztn4"></div> </div> <div id="footer"></div> </body>
css样式：
*{ margin:0 auto;padding:0;} body{background-color:#999;} #yemei{width:100%;height:20px;background-image:url(../images/bg.png);} /*头部开始*/ #header{width:100%;height:120px;position:fixed;top:0px;background-color:#000;opacity:0.7;-moz-opacity:0.7;} #hlogo{width:200px;height:120px;margin-left:50px;float:left;} #hlogo1{width:170px;height:100px;background-image:url(../images/logo2.png);background-repeat:no-repeat;background-position:25px;line-height:120px;font-size:30px;color:#fff;text-align:right;} #hlogot{color:#fff;line-height:20px;font-size:16px;position:relative;top:-10px;left:45px;} #hzhan{width:400px;height:100%;float:left;} #hnav{width:600px;height:100%;float:left;} #hnavtop{width:100%;height:40px;} .hnt{width:40px;height:100%;line-height:40px;color:#fff;text-align:center;float:right;margin-right:15px;} #hnavbuttom{width:100%;height:80px;} .hnb{width:100px;height:100%;line-height:80px;color:#fff;text-align:center;float:left;font-size:18px;} /*头部结束*/ /*内容开始*/ #zhuti{width:100%;height:2648px;background-color:#CCC;} #maodian{ width:50px; height: 300px; position:fixed; right:10px; top:150px;} .md{ width:30px; height:30px; border-radius:50%; background-color:#fff; margin-bottom:10px;} #ztn1{ width:100%; height:662px; background-color:#00F;} #ztn2{ width:100%; height:662px; background-color:#f00;} #ztn3{ width:100%; height:662px; background-color:#0f0;} #ztn4{ width:100%; height:662px; background-color:#f60;} /*内容结束*/ #footer{width:100%;height:120px;background-image:url(../images/bg1-.png);} #yejiao{width:100%;height:20px;background-image:url(../images/bg.png);}
js:
var ztn1 = document.getElementById("ztn1"); var ztn2 = document.getElementById("ztn2"); var ztn3 = document.getElementById("ztn3"); var ztn4 = document.getElementById("ztn4"); var md = document.getElementsByClassName("md"); window.onscroll = function() { var sry = window.scrollY; if(sry<10 && sry>1) { window.scroll(0,662); } if(sry<662 && sry>642) { window.scroll(0,0); } if(sry<682 && sry>662) { window.scroll(0,1324); } if(sry<1324 && sry>1304) { window.scroll(0,662); } if(sry<1344 && sry>1324) { window.scroll(0,1986); } if(sry<1986 && sry>1966) { window.scroll(0,1324); } }