Js+Css完成一个平滑效果的网页滚动效果

发布时间：2018-08-19 09:25:16 所属栏目：Unix 来源：站长网

导读：Js+Css完成一个平滑效果的网页滚动效果，当我们点击元素后，网页向上滚动，初学者所写，还不是很完善，兼容性也不到位，先分享给JS爱好者，期待与你共同交流。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/

　　Js+Css完成一个平滑效果的网页滚动效果，当我们点击元素后，网页向上滚动，初学者所写，还不是很完善，兼容性也不到位，先分享给JS爱好者，期待与你共同交流。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>菜鸟写的网页滚动效果</title> <style type="text/css"> *{ margin:0; padding:0; } .page960{ width:960px; margin:auto; } .mainDiv{ width:960px; margin:auto; } .div_menu{ float:left; display:inline; width:95px; border:1px solid #ccc; border-right:none; cursor:pointer; } .div_menu span{ width:93px; height:60px; display:block; line-height:60px; text-align:center; margin:1px; background:#9FC; } .main_content{ float:left; display:inline; width:860px; border:1px solid #ccc; height:800px; margin-bottom:12px; } </style> </head> <body> <div class="page960" style="height:200px;">head</div> <div class="mainDiv"> <div class="div_menu"> <span onclick="divMove(0)">1</span> <span onclick="divMove(1)">2</span> <span onclick="divMove(2)">3</span> </div> <div class="main_content">test1</div> </div> <div class="mainDiv"> <div class="div_menu"> <span onclick="divMove(0)">1</span> <span onclick="divMove(1)">2</span> <span onclick="divMove(2)">3</span> </div> <div class="main_content">test2</div> </div> <div class="mainDiv"> <div class="div_menu"> <span onclick="divMove(0)">1</span> <span onclick="divMove(1)">2</span> <span onclick="divMove(2)">3</span> </div> <div class="main_content">test3</div> </div> <script type="text/javascript"> var currentpos,timer; var myDiv=new Array(); var j=0; var k=0; var n=0; var timer=null; var speed=0; allDiv=document.getElementsByTagName("div"); /*假如是ie8或者是火狐*/ if(navigator.appVersion.indexOf("7.0")==-1&&navigator.appVersion.indexOf("6.0")==-1) { for(j=0;j<allDiv.length;j++) { if(allDiv[j].className=="div_menu") { myDiv[n]=allDiv[j]; n++; } } } else { for(j=0;j<allDiv.length;j++) { if(allDiv[j].className=="mainDiv") { myDiv[n]=allDiv[j]; n++; } } } function divMove(m) { sc(); //因为要符合标准页面包含了DOCTYPE所以用document.body.scrollTop无 currentPos=document.documentElement.scrollTop; for(k in myDiv) { if(m==k) { myElement=myDiv[k]; //window.scroll(0,myDiv[k].offsetTop); } } if(myElement.offsetTop>currentPos) { moveDown(); } if(myElement.offsetTop<currentPos) { moveUp(); } } //向下移动 function moveDown() { timer=setInterval("scrollDown()",10); } function scrollDown() { if(Math.ceil(currentPos)>=myElement.offsetTop) { sc(); timer=null; speed=0; } else { speed=(myElement.offsetTop-currentPos)/15; currentPos=currentPos+speed; window.scroll(0,currentPos); } } //向上移动 function moveUp() { timer=setInterval("scrollUp()",10); } function scrollUp() { if(Math.round(currentPos)<=myElement.offsetTop) { sc(); timer=null; speed=0; } else { speed=(myElement.offsetTop-currentPos)/15; currentPos=currentPos+speed; window.scroll(0,currentPos); } // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ } //停止移动 function sc(){ clearInterval(timer); timer=null; } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!