支持所有浏览器,返回顶部代码,js实现,css辅助,页面离开顶部一定距离后出现返回顶部按钮或图片,点击返回顶部后滚动效果返回顶部。支持支持IE,FF,chrome ,safari,opera等浏览器。
全部代码如下,将如下代码存为htm文件,运行看效果,同文件夹下放返回顶部图片“bubufx_top.jpg”
布布分享#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;
}
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);
}
}
}
布布分享提示您,测试页面,让页面变的更高高
var bubufx_goTopImg = "bubufx_top.jpg";
document.write("
goTopFun();