Javascript 实现右侧悬浮框回到顶部按钮

最新推荐文章于 2023-04-24 14:36:56 发布

weixin_30687051

最新推荐文章于 2023-04-24 14:36:56 发布

阅读量349

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/HAYATA/p/7350361.html

版权

<!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>

// 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.οnclick=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.οnlοad=window.οnresize=window.οnscrοll=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>

转载于:https://www.cnblogs.com/HAYATA/p/7350361.html