现在网上好多类似的效果，今天心情好，就私自模仿一个去，代码如下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>单页面网站</title> <style type="text/css"> *{ margin:0; padding:0;} .html,body{ width:100%;} .top{ height:50px; background:#f1f1f1; position:fixed; top:0; left:0; width:100%; line-height:50px;} .top b{ color:#06C; margin:0 10px; cursor:pointer; font-size:13px; font-weight:normal;} .top b.active{ color:#fff; background:#C60; padding:3px; font-weight:bold;} .container{ color:#fff; margin-top:50px;} .container div{text-align:center; font-size:100px; color:#fff; font-weight:bold; line-height:600px; text-shadow:0 0 3px #333;} </style> </head> <body> <div class="top" id="top"></div> <div class="container" id="a"> <div mytitle="网站首页" style="background:#06C;">网站首页</div> <div mytitle="公司简介" style="background:#f00;">公司简介</div> <div mytitle="公司产品" style="background:#0ff;">公司产品</div> <div mytitle="公司荣誉" style="background:#00f;">公司荣誉</div> <div mytitle="招聘英才" style="background:#f2f;">招聘英才</div> <div mytitle="联系我们" style="background:#01a;">联系我们</div> </div> </body> </html> <script type="text/javascript"> window.onload=window.onreset=function(){ document.documentElement.scrollTop=0; var winHeight=document.documentElement.clientHeight||document.body.clientHeight; var arr=[]; var timer=null; var oTop=document.getElementById("top"); var a=document.getElementById("a"); var aDiv=a.getElementsByTagName("div"); for(var i=0;i<aDiv.length;i++){ var aA=document.createElement("b"); aA.innerHTML=aDiv[i].getAttribute("mytitle"); aDiv[i].style.height=winHeight-oTop.offsetHeight+"px"; var disY=aDiv[i].offsetTop; arr.push(disY); oTop.appendChild(aA); } var bb=oTop.getElementsByTagName("b"); bb[0].className="active"; for(var i=0;i<bb.length;i++){ (function(n){ bb[n].onclick=function(){ clearInterval(timer); timer=setInterval(function(){ var oTarget=arr[n]-50; var oldP=document.documentElement.scrollTop||document.body.scrollTop; if(oldP<oTarget){ var speed=Math.ceil((oTarget-oldP)/7); }else{ var speed=Math.floor((oTarget-oldP)/7); } if(oldP!=oTarget){ document.documentElement.scrollTop=oldP+speed; document.body.scrollTop=oldP+speed; }else{ clearInterval(timer) } },30) } })(i) } window.onscroll=function(){ var scTop=document.documentElement.scrollTop||document.body.scrollTop; var num=Math.round(scTop/aDiv[0].offsetHeight); for(var i=0;i<bb.length;i++){ bb[i].className=""; } bb[num].className="active"; } } </script>