我网上找了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漂浮到页面底部?什么原因呢
var adv = document.getElementById("bottomnav");
adv.scrollTop = adv.scrollHeight;
</script><div id="bottomnav"><a href="#top">返回顶部</a></div>
我照写了那段js但是都实现不了让此div漂浮到页面底部?什么原因呢
解决方案 »
- 谷歌浏览器 怎么用js复制东西到剪贴板啊?
- 关于用javascript在FF下通过innerHTML获到input的html代码问题
- 请教高手,这个代码怎么写
- 用JS 实现的Ordered Binary Tree 的节点删除问题
- [请教] 优化一个函数
- 我有一个收藏当前页的链接,点一下收藏当前页就把当前页添加收藏夹中,怎么做
- 一个焦点问题,知道的进来!
- 哪里有客户端编程的资料?
- onblur出现怪问题!!!大虾们救命!!!----在线等
- jquery checkbox 全选反选代码只能执行一遍,第二次就失败
- 100分 点击按钮 弹出一个新的对话框。 修改下我的代码,我谈不出来。
- JS:请教关于块级作用相关
<div id="bottomnav" style="position:fixed; bottom:0;right:0;"><a href="#top">返回顶部</a></div>
个人觉得,用JS做的动态漂浮极致恶心,拉动滚动条还跟着闪个蛋,学学CSS的静态显示嘛,这才是正道.
<!--[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下才会执行,其他的浏览器是不会执行的
ie8没效果哦
我现在用的浏览器就是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>
<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碰到边框的时候就弹回继续漂浮。去运行下吧!!!好的话给点分。
ie8加了这句就支持position:fixed;了,但是不懂的是为什么我原本的那些div都乱放了,没加这句就没事
如果你其他的样式什么的设置没有遵循这个标准,就会出现你说的,乱掉
<!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>