Javascript 实现 右侧悬浮框 回到顶部按钮
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Template</title> <style type="text/css"> #floating {width:100px; height:100px; background-color:red; position:fixed;right:0px; top:50%;} </style>
<script> window.onload=function() { // var oDiv1=document.getElementById('floating'); // var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; // var t=(document.documentElement.clientHeight-oDiv1.offsetHeight)/2;
// oDiv1.style.top=scrollTop+t+'px';
var oUl=document.getElementById('ul1'); for(var i=0;i<500;i++) { var oLi=document.createElement('li'); oLi.innerHTML=i; oUl.appendChild(oLi); }
var oBtn=document.getElementById("btn1"); var oTimer=null;
oBtn.onclick=function() { function backToTop() { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var iSpeed=Math.floor(-scrollTop/8); document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed; if(scrollTop==0)//回到顶部后停止滚动 { clearInterval(oTimer); } } oTimer=setInterval(backToTop,30);
} }
// window.onload=window.onresize=window.onscroll=function() // { // var oDiv1=document.getElementById('floating'); // var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; // var t=(document.documentElement.clientHeight-oDiv1.offsetHeight)/2;
// oDiv1.style.top=scrollTop+t+'px';
// } 此处为JS实现方法 ， 简便方法是CSS POSITION:FIXED TOP:50%
</script> </head> <body > <div id="floating"></div> <ul id="ul1" >
</ul>
<input id="btn1" type="button" value="Back to Top" style="position:fixed;right:50px;bottom:50px;"/> </body> </html>
