给网站替加漂亮的浮动top按钮
2011年07月1日
by Yin song
0 comments
最近计划做一个图片网站，婚纱照片欣赏，用dedecms做的模板，但是现在网站还有很多没有完善，今天在一个网站上看到top按钮
就想给自己网站也加一个这样的按钮，
演示如下
张娜拉短发婚纱照
代码如下
js代码
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// 如果距离不为零, 继续调用迭代本函数
if(x > 0 || y > 0) {
var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
//IE6不处理
if(!isIE6){
window.onscroll = function(){
var scrollElement = document.getElementById('scroll');
if(scrollElement){
scrollElement.style.display = (document.documentElement.scrollTop+document.body.scrollTop)?'block':'none'
}
}
}
然后网页调用
<div id=’scroll’ onclick=’goTop();return false;’></div>
还有css代码 scroll，具体可以看我的网站，www.marrygirl.com
这样漂亮的悬浮top效果就做好了
