返回顶部，js，css，页面离开顶部一定距离后出现返回顶部，点击后滚动回顶部，支持IE，FF，chrome ，safari，opera[摘自布布分享,tech.bubufx.com]
Posted on 2013-04-24 10:20 weekzero 阅读(128) 评论(0) 编辑 收藏 举报支持所有浏览器，返回顶部代码，js实现，css辅助，页面离开顶部一定距离后出现返回顶部按钮或图片，点击返回顶部后滚动效果返回顶部。支持支持IE，FF，chrome ，safari，opera等浏览器。
全部代码如下，将如下代码存为htm文件，运行看效果，同文件夹下放返回顶部图片“bubufx_top.jpg”
<!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>
<title>布布分享</title>
<style type="text/css">
#goTopImg
{
position: fixed;
text-align: center;
line-height: 30px;
width: 30px;
bottom: 60px; /*离底部的距离*/
height: 33px;
font-size: 12px;
cursor: pointer;
right: 80px; /*偏离右侧的距离*/
_position: absolute;
_right: auto;
}
</style>
<script type="text/javascript">
function goTopFun() {
var bubufx_scrollheight = 600; //页面离开顶部的距离，超过该距离才出现返回顶部图片
var obj = document.getElementById("goTopImg");
function getScrollTop() {
return document.documentElement.scrollTop + document.body.scrollTop; //解决多浏览器支持,chrome等浏览器下document.documentElement.scrollTop的值是0
}
function setScrollTop(value) {
//解决多浏览器支持
if (document.documentElement.scrollTop == 0) {
document.body.scrollTop = value;
}
else {
document.documentElement.scrollTop = value;
}
}
window.onscroll = function () { getScrollTop() > bubufx_scrollheight ? obj.style.display = "" : obj.style.display = "none"; }
obj.onclick = function () {
var goTop = setInterval(scrollMove, 10);
function scrollMove() {
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
}
}
</script>
</head>
<body>
<div style="height: 6000px; text-align: center;">
布布分享提示您，测试页面，让页面变的更高高
</div>
<script type="text/javascript">
var bubufx_goTopImg = "bubufx_top.jpg";
document.write("<div style="display: none" id="goTopImg"><img border="0" src="" + bubufx_goTopImg + ""></div>");
goTopFun();
</script>
</body>
</html>
