javascript js 返回顶部 源代码 兼容ie火狐谷歌等浏览器
来源:互联网 发布:win7 录屏软件 编辑:程序博客网 时间:2024/05/12 11:31
此段js结合了网络上的一些代码,然后本人给改良了一下。可以兼容各个浏览器。按钮的现在位置是显示屏的中间往右470px。最下面的img标签里是用图片来做回顶部的按钮,您可以自己找一张喜欢的图片来做按钮,改一下路径就可以了。 喜欢的可以加php qq群:196136757。一起讨论
刚才发现一个问题,如果高分辨率浏览网页的话,一般都会把缩放调到150%,所以css样式的话改为:
#zhongyang{
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 50px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 10px; _position: absolute; _right: auto
}
<!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" />
<title>返回顶部按钮</title>
<meta name="keywords" content=""/>
<meta name="Description" content=""/>
</head>
<body style="height:1000px;">
<style type="text/css">
#zhongyang{ width:20px; height:50px; position:fixed; top:50%; left:50%; margin:200px auto auto 470px; _position:absolute;background:#ccc}
</style>
<!--下面这段js兼容ie6的-->
<script language="javascript">
function position_fixed(domId){
el = document.getElementById(domId);
el.style.display = "block";
// check is IE6
if(!window.XMLHttpRequest)
window.onscroll = function(){
el.style.top=document.documentElement.scrollTop+document.documentElement.clientHeight/2+"px";
}
}
setTimeout("position_fixed('zhongyang')", 3000);//延迟3秒后弹出
function goTopEx(){
var obj=document.getElementById("zhongyang");
function getScrollTop(){
return document.documentElement.scrollTop||document.body.scrollTop;
}
function setScrollTop(value){
document.documentElement.scrollTop=value;
}
window.onscroll=function(){getScrollTop()>200?obj.style.display="":obj.style.display="none";}
obj.onclick=function(){
window.scroll(0,0);
var goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/0);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}
</script>
<DIV style="DISPLAY: none;cursor:pointer;" id=zhongyang>
<IMG border=0 src="./img/scrolltop.png" title="返回顶部">
</DIV>
<SCRIPT type=text/javascript>goTopEx();</SCRIPT>
</body>
</html>
- javascript js 返回顶部 源代码 兼容ie火狐谷歌等浏览器
- ireport超链接支持js事件简单实现 兼容火狐谷歌IE等浏览器
- js在ie、火狐等浏览器的兼容
- js上传前预览,兼容IE、谷歌等浏览器
- 兼容ie 火狐 谷歌等各大浏览器css hack代码总结
- 在网页中插入FLV视频,经测试兼容IE、火狐、谷歌等浏览器
- Iframe的高度自适应且兼容谷歌,火狐,IE和360等主流浏览器
- jquery-form.js 兼容IE8 IE9等以上火狐谷歌等浏览器
- js实现鼠标拖动图片 兼容IE,FF火狐,谷歌浏览器
- js无缝图片滚动代码,利用强大的JQUERY,兼容IE、火狐等主流浏览器
- js在当前光标处插入特定字符 兼容ie、火狐、谷歌、360、NETSCAPE等浏览器
- js获得指定控件光标的坐标,兼容IE,Chrome,火狐等多种主流浏览器
- 常用的兼容IE和火狐FF等浏览器的js方法
- 常用的兼容IE和火狐FF等浏览器的js方法
- javascript JS 实现打印页面功能 支持多浏览器,兼容IE,火狐,谷歌
- IE,火狐,OPERA等浏览器CSS Hack和向后兼容
- 兼容火狐、谷歌等主流浏览器的万年历
- 兼容火狐、谷歌等主流浏览器的万年历
- IT外企那点儿事(12):也说跳槽
- Android学习笔记(三九):资源resource(下)
- 数组输出
- 图片和文字垂直居中的方法
- oracle 锁定账户
- javascript js 返回顶部 源代码 兼容ie火狐谷歌等浏览器
- Can't allocate space for object 'syslogs' in database:Sybase
- oralce返回结果集cursor
- 几款不错的天气插件
- MySQL数据库连接速度优化
- iOS开发环境,证书和授权文件
- storm trident 笔记
- RTP/RTSP/RTCP的区别
- oracle启用账户