常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
更新时间：2012年01月04日 17:28:53 作者：
返回顶部是经常会见到的效果，代码比较简单，使用2个对象和一个主函数。职责明确方便复用
在性能方面考虑了由于连续触发onscroll事件，频繁调用回调函数而产生的性能问题。可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了onscroll事件，但回调函数只会执行一次。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title>
<style>
.fixed{
position:fixed; bottom:100px; width:20px; right:100px; height:80px; font-size:12px;
cursor:pointer; background-color:#ccc; opacity:0; filter: alpha(opacity=0);
}
.placeholder{ height:2000px;}
</style>
</head>
<body>
<div id="gotop" class="fixed">
返回顶部
</div>
<script>
var tool = {
//此方法为了避免在 ms 段时间内，多次执行func。常用 resize、scoll、mousemove等连续性事件中
buffer: function(func, ms, context){
var buffer;
return function(){
if(buffer) return;
buffer = setTimeout(function(){
func.call(this)
buffer = undefined;
},ms);
};
},
/*读取或设置元素的透明度*/
opacity: function(elem, val){
var setting = arguments.length > 1;
if("opacity" in elem.style){//elem.style["opacity"] 读取不到CSS class中的值
return setting ? elem.style["opacity"] = val : elem.style["opacity"];
}else{
if(elem.filters && elem.filters.alpha) {
return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100;
}
}
},
//获取或设置文档对象的scrollTop
//function([val])
documentScrollTop: function(val){
var elem = document;
return (val!== undefined) ?
elem.documentElement.scrollTop = elem.body.scrollTop = val :
Math.max(elem.documentElement.scrollTop, elem.body.scrollTop);
}
};
//动画效果
var effect = {
//淡入
fadein: function (elem){
var val = 0;
var interval = 25;
setTimeout(function(){
val += 0.1;
if(val>1){
tool.opacity(elem, 1)
return;
}else {
tool.opacity(elem, val)
setTimeout(arguments.callee, interval);
}
},interval);
},
//淡出
fadeout: function (elem){
var val = 1;
var interval = 25;
setTimeout(function(){
val -= 0.1;
if(val < 0){
tool.opacity(elem, 0)
return;
}else {
tool.opacity(elem,val) ;
setTimeout(arguments.callee, interval);
}
},interval);
},
//减速移动滚动条
move: function(scrollTop){
setTimeout(function(){
scrollTop = Math.floor((scrollTop * 0.65));
tool.documentScrollTop(scrollTop);
if(scrollTop !=0 ){
setTimeout(arguments.callee, 25);
}
},25);
}
};
//主程序
(function(){//gotop
var visible = false;
var elem = document.getElementById("gotop");
function onscroll(){
var scrollTop = tool.documentScrollTop();
if(scrollTop > 0){
if(!visible){
effect.fadein(elem)
visible = true;
}
}else{
if(visible){
effect.fadeout(elem);
visible = false;
}
}
}
function onclick(){
var scrollTop = tool.documentScrollTop();
effect.move(scrollTop);
}
elem.onclick = onclick;
window.onscroll = tool.buffer(onscroll, 200, this);
})();
</script>
<div class="placeholder">placeholder</div>
</body>
</html>
兼容性和bugs相关问题：
1 opacity: function(elem, val){
if(val){//使用这种判断方式当传0，空字符串时会产生BUG 。
2：document.documentElement.scrollTop chrome取不到值 。
3： elem.style.opacity 读取不到在CSS Class中定义的值。
4：IE6不支持fixed定位，虽然可以使用absolute模拟。不过很有很多网站都它进行了降级处理。
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>结合淡入/淡出/减速运动效果实现的返回顶部功能</title>
<style>
.fixed{
position:fixed; bottom:100px; width:20px; right:100px; height:80px; font-size:12px;
cursor:pointer; background-color:#ccc; opacity:0; filter: alpha(opacity=0);
}
.placeholder{ height:2000px;}
</style>
</head>
<body>
<div id="gotop" class="fixed">
返回顶部
</div>
<script>
var tool = {
//此方法为了避免在 ms 段时间内，多次执行func。常用 resize、scoll、mousemove等连续性事件中
buffer: function(func, ms, context){
var buffer;
return function(){
if(buffer) return;
buffer = setTimeout(function(){
func.call(this)
buffer = undefined;
},ms);
};
},
/*读取或设置元素的透明度*/
opacity: function(elem, val){
var setting = arguments.length > 1;
if("opacity" in elem.style){//elem.style["opacity"] 读取不到CSS class中的值
return setting ? elem.style["opacity"] = val : elem.style["opacity"];
}else{
if(elem.filters && elem.filters.alpha) {
return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100;
}
}
},
//获取或设置文档对象的scrollTop
//function([val])
documentScrollTop: function(val){
var elem = document;
return (val!== undefined) ?
elem.documentElement.scrollTop = elem.body.scrollTop = val :
Math.max(elem.documentElement.scrollTop, elem.body.scrollTop);
}
};
//动画效果
var effect = {
//淡入
fadein: function (elem){
var val = 0;
var interval = 25;
setTimeout(function(){
val += 0.1;
if(val>1){
tool.opacity(elem, 1)
return;
}else {
tool.opacity(elem, val)
setTimeout(arguments.callee, interval);
}
},interval);
},
//淡出
fadeout: function (elem){
var val = 1;
var interval = 25;
setTimeout(function(){
val -= 0.1;
if(val < 0){
tool.opacity(elem, 0)
return;
}else {
tool.opacity(elem,val) ;
setTimeout(arguments.callee, interval);
}
},interval);
},
//减速移动滚动条
move: function(scrollTop){
setTimeout(function(){
scrollTop = Math.floor((scrollTop * 0.65));
tool.documentScrollTop(scrollTop);
if(scrollTop !=0 ){
setTimeout(arguments.callee, 25);
}
},25);
}
};
//主程序
(function(){//gotop
var visible = false;
var elem = document.getElementById("gotop");
function onscroll(){
var scrollTop = tool.documentScrollTop();
if(scrollTop > 0){
if(!visible){
effect.fadein(elem)
visible = true;
}
}else{
if(visible){
effect.fadeout(elem);
visible = false;
}
}
}
function onclick(){
var scrollTop = tool.documentScrollTop();
effect.move(scrollTop);
}
elem.onclick = onclick;
window.onscroll = tool.buffer(onscroll, 200, this);
})();
</script>
<div class="placeholder">placeholder</div>
</body>
</html>
兼容性和bugs相关问题：
1 opacity: function(elem, val){
if(val){//使用这种判断方式当传0，空字符串时会产生BUG 。
2：document.documentElement.scrollTop chrome取不到值 。
3： elem.style.opacity 读取不到在CSS Class中定义的值。
4：IE6不支持fixed定位，虽然可以使用absolute模拟。不过很有很多网站都它进行了降级处理。
相关文章
在开发后台管理系统时，常常会涉及到各种树状结构的数据处理逻辑，例如：增，删，改，查等。而树状结构的处理就没有数组那么的直观。本文为大家总结了JS树状结构的数据处理的方法，需要的可以参考下2022-07-07
今天项目中突然遇到了不太明白的写法,下面这篇文章主要给大家介绍了关于JavaScript中.?、??、??=的用法以及含义的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JavaScript对数字的判断与处理方法,实例分析了javascript判断数字的常见方法与针对数字处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下2022-07-07
这篇文章主要为大家详细介绍了基于JavaScript实现淘宝商品广告效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
在做用户实名验证时,常会用到身份证号码的正则表达式及校验方案,下面这篇文章主要给大家介绍了关于JS正则表达式及身份证号码验证的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了微信开发 消息推送实现代码的相关资料,需要的朋友可以参考下2016-10-10
本篇文章主要是对JavaScript网页定位进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
reduce() 是 JavaScript 中一个很有用的数组方法，这篇文章主要介绍了JavaScript中reduce()方法的高级技巧，感兴趣的小伙伴可以了解一下2023-03-03
这篇文章主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论