点击网页右下面的按钮回到顶部js效果:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点击网页右下面的按钮回到顶部js效果-www.itjxue.com</title> <script type="text/javascript"> window.onload=function() { var oBtn=document.getElementById('btn1'); var bSys=true; var timer=null; //检测用户是否拖动了滚动条 window.onscroll=function() { if(!bSys) //如果用户在回去时拖动了滚动条则删除定时器 { clearInterval(timer); } bSys=false; } oBtn.onclick=function() { timer=setInterval(function(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var iSpeed=Math.floor(-scrollTop/8); if(scrollTop==0) { clearInterval(timer); } bSys=true; document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed; },30) } } </script> </head> <body> <div style="height:2000px;"></div> <input type="button" value="回到顶部" id="btn1" /> </body> </html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]