在网页的右下角显示一个返回顶部按钮,只有用户拖动滚动条到底部才显示,这个按钮的兼容性不错。
<!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> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>兼容各种浏览器的返回顶部悬浮按钮效果_武鸣人</title> <style type="text/css"> *{ margin:0; padding:0; } html{ _overflow:hidden; } body{ _overflow:auto; height:100%; } a{ text-decoration:none; } #div{ background:#ccc; width:400px; height:1500px; text-align:center; } #returntop{ border:1px #ccc solid; background:#F30; width:80px; height:30px; position:fixed; _position:absolute; line-height:30px; text-align:center; top:0px; left:0px; display:none; cursor:pointer; } </style> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div id="div"><a name="top"></a>这是顶部,滚动页面到底部看效果。</div> <div id="returntop"><a href="#top">返回顶部</a></div> <script type="text/javascript"> var getDiv=document.getElementById('returntop'); var n=0; function scrollEvent(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; if(scrollTop){ getDiv.style.display="block"; }else{ getDiv.style.display="none"; } n=1; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) window.onscroll=scrollEvent; if(n==0){ document.body.onscroll=scrollEvent; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) function getWinSize(){ var winHeight=window.innerHeight,winWidth=window.innerWidth; if(document.documentElement.clientHeight){ winHeight=document.documentElement.clientHeight; winWidth=document.documentElement.clientWidth; }else{ winHeight=document.body.clientHeight; winWidth=document.body.clientWidth; } var height=winHeight-50; var width=winWidth-100; getDiv.style.top=height+"px"; getDiv.style.left=width+"px"; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) getWinSize(); window.onresize=getWinSize; </script> </body> </html>
本文来自武鸣人网站,转载请注明出处