js让div漂浮在页面底部

xiaofen8 2012-09-03 09:25:35
我网上找了js让div漂浮在页面底部的实现，很多都是说


<script type="text/javascript" defer>

    var adv = document.getElementById("bottomnav");

    adv.scrollTop = adv.scrollHeight;

</script>

<div id="bottomnav"><a href="#top">返回顶部</a></div>
我照写了那段js但是都实现不了让此div漂浮到页面底部？什么原因呢
...全文
4051 23 打赏 收藏 转发到动态 举报
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
孟子E章 2012-09-09
  • 打赏
  • 举报
 回复
兼容IE6/IE7/IE8/IE9/Firefox/Chrome/Safari/Oprea浏览器的浮动代码


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

<style type="text/css">

html,body{margin:0;padding:0;}

#y1 {position:fixed;top:0;left:0;width:100px;height:100px;border:1px solid red;}

#y2 {position:fixed;top:0;right:0;width:100px;height:100px;border:1px solid red;}

#y3 {position:fixed;bottom:0;left:0;width:100px;height:100px;border:1px solid red;}

#y4 {position:fixed;bottom:0;right:0;width:100px;height:100px;border:1px solid red;}

</style>

<!--[if lte IE 6]>

<style>

#y1 {position:absolute;}

#y2 {position:absolute;}

#y3 {position:absolute;}

#y4 {position:absolute;}

</style>

<![endif]-->



<script type="text/javascript">

  //以下所有脚本只为IE6写，其他浏览器完全可以删除。

  function getViewportScrollX() {

    var scrollX = 0;

    if (document.documentElement && document.documentElement.scrollLeft) {

      scrollX = document.documentElement.scrollLeft;

    }

    else if (document.body && document.body.scrollLeft) {

      scrollX = document.body.scrollLeft;

    }

    else if (window.pageXOffset) {

      scrollX = window.pageXOffset;

    }

    else if (window.scrollX) {

      scrollX = window.scrollX;

    }

    return scrollX;

  }



  function getViewportScrollY() {

    var scrollY = 0;

    if (document.documentElement && document.documentElement.scrollTop) {

      scrollY = document.documentElement.scrollTop;

    }

    else if (document.body && document.body.scrollTop) {

      scrollY = document.body.scrollTop;

    }

    else if (window.pageYOffset) {

      scrollY = window.pageYOffset;

    }

    else if (window.scrollY) {

      scrollY = window.scrollY;

    }

    return scrollY;

  }



  function getViewportWidth() {

    var width = 0;

    if (document.documentElement && document.documentElement.clientWidth) {

      width = document.documentElement.clientWidth;

    }

    else if (document.body && document.body.clientWidth) {

      width = document.body.clientWidth;

    }

    else if (window.innerWidth) {

      width = window.innerWidth - 18;

    }

    return width;

  }



  function getViewportHeight() {

    var height = 0;

    if (window.innerHeight) {

      height = window.innerHeight - 18;

    }

    else if (document.documentElement && document.documentElement.clientHeight) {

      height = document.documentElement.clientHeight;

    }

    else if (document.body && document.body.clientHeight) {

      height = document.body.clientHeight;

    }

    return height;

  }



  if (navigator.userAgent.indexOf("MSIE 6") > -1 && navigator.userAgent.indexOf("MSIE 7") == -1 && navigator.userAgent.indexOf("MSIE 8") == -1) {

    window.ononload = window.onscroll = window.onresize = function (e) {

      var t = getViewportScrollY();

      var l = getViewportScrollX();

      var w = getViewportWidth();

      var h = getViewportHeight();

      document.getElementById("y1").style.left = l + "px";

      document.getElementById("y1").style.top = t + "px";



      document.getElementById("y2").style.left = l + w - document.getElementById("y2").offsetWidth + "px";

      document.getElementById("y2").style.top = t + "px";



      document.getElementById("y3").style.left = l + "px";

      document.getElementById("y3").style.top = t + h - document.getElementById("y2").offsetHeight + "px";



      document.getElementById("y4").style.left = l + w - document.getElementById("y2").offsetWidth + "px";

      document.getElementById("y4").style.top = t + h - document.getElementById("y2").offsetHeight + "px";

    }

  }

</script>

</head>

<body>

<div id="y1">左上角位置的内容</div>

<div id="y2">右上角位置的内容</div>

<div id="y3">左下角位置的内容</div>

<div id="y4">右下角位置的内容</div>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>

</body>

</html>
xiaofen8 2012-09-09
  • 打赏
  • 举报
 回复
整个页面无限下拉，我也不知道什么问题
泡泡鱼_ 2012-09-07
  • 打赏
  • 举报
 回复
无限下拉？？我未例中只是定义了一个高度为1500px的div，让你看滚屏时的效果而已

你又出问题了。。。。。我IE6,7,8,FF,Chrome下均没有你说的什么无限下拉的情况
xiaofen8 2012-09-07
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 的回复:]
申明当前页面的W3c标准是 XHTML
如果你其他的样式什么的设置没有遵循这个标准，就会出现你说的，乱掉
[/Quote]
改好了，现在position:fixed有作用了，但是你那段js代码运气起来怎么变成无限下拉了？
泡泡鱼_ 2012-09-06
  • 打赏
  • 举报
 回复
申明当前页面的W3c标准是 XHTML
如果你其他的样式什么的设置没有遵循这个标准，就会出现你说的，乱掉
xiaofen8 2012-09-06
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
ie8加了这句就支持position:fixed;了，但是不懂的是为什么我原本的那些div都乱放了，没加这句就没事
xiaofen8 2012-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 的回复:]

<html>
<head>
<title>example</title>
<script language="javascript">
var sunX=0;
var sunY=0;
var directX=1;
var directY=1;
function dotaMove(){
sunX+=directX;
sunY+=dir……
[/Quote]
选了中文编码之后可以显示了，但是我原本的所有div都乱float了，干嘛要选中文编码才可以显示，每次都要选不是麻烦吗，还有那个页面变成了无下限的下拉了，我初学有很多不懂
泡泡鱼_ 2012-09-06
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 的回复:]
这个整个页面都乱码

[/Quote]
。。。。乱码，你本地路径访问的是吧？浏览器上选择：查看-->编码-->选择“简体中文”或“Unicode(utf-8)”
xiaofen8 2012-09-05
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 的回复:]

<html>
<head>
<title>example</title>
<script language="javascript">
var sunX=0;
var sunY=0;
var directX=1;
var directY=1;
function dotaMove(){
sunX+=directX;
sunY+=dir……
[/Quote]
这个代码是做出客服在线那种效果了，我这里想要返回顶部那个导航的效果，不过先学习一下了
xiaofen8 2012-09-05
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 的回复:]
引用 8 楼 的回复:
根本就不会悬浮底部，这句position:fixed;好像是形同虚设那样


我现在用的浏览器就是IE8。下面的代码你直接复制去测试吧。我不知道你拿过去后修改成什么样子了。

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org……
[/Quote]
这个整个页面都乱码
MS20HJ 2012-09-05
  • 打赏
  • 举报
 回复

<html>
<head>
<title>example</title>
<script language="javascript">
var sunX=0;
var sunY=0;
var directX=1;
var directY=1;
function dotaMove(){
sunX+=directX;
sunY+=directY;

dota.style.top=sunY+"px";
dota.style.left=sunX+"px";

if(sunX+dota.offsetWidth>=document.body.clientWidth||sunX<=0){
directX=-directX;
}
if(sunY+dota.offsetHeight>=document.body.clientHeight||sunY<=0){
directY=-directY;
}
}

setInterval("dotaMove()",5);
</script>
</head>
<body style="background-image:url('imgs/beijing.jpg');">
<div id="dota" style="position:absolute"><img src="imgs/d1.jpg"></div>
</body>
</html>

写了个简单的漂浮，当div碰到边框的时候就弹回继续漂浮。去运行下吧！！！好的话给点分。
ccie_123 2012-09-05
  • 打赏
  • 举报
 回复
恶心的IE 同意~
泡泡鱼_ 2012-09-05
  • 打赏
  • 举报
 回复
那个“返回顶部”一直保持在右下角
泡泡鱼_ 2012-09-05
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 的回复:]
根本就不会悬浮底部，这句position:fixed;好像是形同虚设那样
[/Quote]

我现在用的浏览器就是IE8。下面的代码你直接复制去测试吧。我不知道你拿过去后修改成什么样子了。
<!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=utf-8" />

<title>测试</title>

<!--[if IE 6]> 

<script type="text/javascript">



function gotop()

{

    var o=document.getElementById("bottomnav");

    o.style.position='absolute';//变更其定位方式

    //获取顶离偏移量 

    var top= document.documentElement?(document.documentElement.scrollTop || 0):(document.body.scrollTop || 0);

    top = Math.max(top, (window.scrollY || 0));

    top+= document.documentElement?(document.documentElement.clientHeight || 0):(document.body.clientHeight || 0);

    //获取左边偏移量

    var left= document.documentElement?(document.documentElement.clientWidth || 0):(document.body.clientWidth || 0);

    //设置

    o.style.left=left-70+'px';

    o.style.top=top-20+'px';

}

window.attachEvent?window.attachEvent("onscroll",gotop):window.addEventListener("scroll",gotop,false);

</script>

<![endif]-->





</head>



<body>

<div id="bottomnav" style="position:fixed; bottom:0;right:0;height:20px;width:70px;"><a href="javascript:window.scrollTo(0,0);">返回顶部</a></div>

<div style="width:200px;height:1500px;border:1px solid #bfbfbf;"></div>

</body>

</body>

</html>
泡泡鱼_ 2012-09-04
  • 打赏
  • 举报
 回复
呵呵，大家都拒绝兼容IE6就OK了。恶心的IE
xiaofen8 2012-09-04
  • 打赏
  • 举报
 回复
根本就不会悬浮底部，这句position:fixed;好像是形同虚设那样
泡泡鱼_ 2012-09-04
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 的回复:]
<div id="bottomnav" style="position:fixed; bottom:0;right:0;height:20px;width:70px;"><a href="javascript:window.scrollTo(0,0);">返回顶部</a></div>
ie8没效果哦
[/Quote]
IE6,7,8;FF,Chrome我全都试过，没问题我才会把代码贴出来，你说没效果是指悬浮底部没效果？？
被偷的香蕉 2012-09-04
  • 打赏
  • 举报
 回复
顶UP.
个人觉得,用JS做的动态漂浮极致恶心,拉动滚动条还跟着闪个蛋,学学CSS的静态显示嘛,这才是正道.
xiaofen8 2012-09-04
  • 打赏
  • 举报
 回复
<div id="bottomnav" style="position:fixed; bottom:0;right:0;height:20px;width:70px;"><a href="javascript:window.scrollTo(0,0);">返回顶部</a></div>
ie8没效果哦
泡泡鱼_ 2012-09-04
  • 打赏
  • 举报
 回复
那你这样好了：
<!--[if IE 6]> 

<script type="text/javascript">



function gotop()

{

    var o=document.getElementById("bottomnav");

    o.style.position='absolute';//变更其定位方式

    //获取顶离偏移量 

    var top= document.documentElement?(document.documentElement.scrollTop || 0):(document.body.scrollTop || 0);

    top = Math.max(top, (window.scrollY || 0));

    top+= document.documentElement?(document.documentElement.clientHeight || 0):(document.body.clientHeight || 0);

    //获取左边偏移量

    var left= document.documentElement?(document.documentElement.clientWidth || 0):(document.body.clientWidth || 0);

    //设置

    o.style.left=left-70+'px';

    o.style.top=top-20+'px';

}

window.attachEvent?window.attachEvent("onscroll",gotop):window.addEventListener("scroll",gotop,false);

</script>

<![endif]-->

<div id="bottomnav" style="position:fixed; bottom:0;right:0;height:20px;width:70px;"><a href="javascript:window.scrollTo(0,0);">返回顶部</a></div>


这样的话，那段js将只在IE6下才会执行，其他的浏览器是不会执行的
加载更多回复（2）
[js压缩版]屏自适应始终漂浮手机网站底部广告js代码
[js压缩版]屏自适应始终漂浮手机网站底部广告js代码 此版为在原yeees同学的基础上做的js压缩版
CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
NULL 博文链接：https://m635674608.iteye.com/blog/1356277
底部漂浮框
底部漂浮框
原生js页面上漂浮的气球动画效果
原生js页面上漂浮的气球动画效果
JS漂浮广告代码、JS漂浮广告代码
JS漂浮广告代码JS漂浮广告代码JS漂浮广告代码JS漂浮广告代码JS漂浮广告代码
JavaScript

87,991

社区成员

224,687

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章