源生js回到顶部

最新推荐文章于 2023-03-29 23:21:31 发布

十三浪

最新推荐文章于 2023-03-29 23:21:31 发布

阅读量1.1k

点赞数

分类专栏：前端技巧 javascript JavaScript常用技巧文章标签： div+css javascript

前端技巧同时被 3 个专栏收录

41 篇文章 0 订阅

订阅专栏

javascript

18 篇文章 0 订阅

订阅专栏

JavaScript常用技巧

11 篇文章 0 订阅

订阅专栏

CSS hack实现IE6的兼容，功能：
　　1、和论坛的回顶部悬浮层基本一样，当浏览器的滚动条滚动(>0)时，悬浮层出现，当滚动条滚动为0时隐藏，用到了window.onscroll事件。
　　2、当浏览器窗口大小发生改变时，悬浮层的位置改变，用到了window.onresize事件，使悬浮层始终位于可视窗口的右下方

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部</title>
<style type="text/css">
html{
   _overflow:hidden;
}
body{
   _overflow:auto;
   height:100%;
}
#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;
}
a{
   text-decoration:none;
}
</style>
</head>
<body>
<div id="div">这是顶部</div>
<div id="returntop">回顶部</div>
<script type="text/javascript">
var getDiv=document.getElementById('returntop');
getDiv.οnclick=function(){
   window.scrollTo(0,0);
}
window.οnscrοll=function(){
   if(document.documentElement.scrollTop){
       getDiv.style.display="block";
   }else if(document.body.scrollTop){
       getDiv.style.display="block";
   }else{
       getDiv.style.display="none";
   }
}
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";
}
getWinSize();
window.οnresize=getWinSize;
</script>
</body>
</html>

十三浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
源生js回到顶部

回到顶部html{ _overflow:hidden; }body{ _overflow:auto; height:100%;}#div{ background:#ccc; width:400px; height:1500px; text-align:center;}#returntop{
复制链接

扫一扫

专栏目录