兼容各种浏览器的返回顶部悬浮按钮效果

2个月前 (03-02 20:16)阅读50回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

在网页的右下角显示一个返回顶部按钮,只有用户拖动滚动条到底部才显示,这个按钮的兼容性不错。

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


0
0
收藏0
回帖

兼容各种浏览器的返回顶部悬浮按钮效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息