jquery 返回顶端组件

自己写了一个基于jquery的返回页面顶端的组件。 

(function($) { 
var g; 
$.backtop = function(options) { 
extend($.backtop.config, options); 
this.config = $.backtop.config; 
this.init(); 
g = this; 
}; 
$.backtop.config = { 
title : null,// 返回顶端文字说明 
df_color : "#77AA55"// 组件默认颜色 
}; 
$.backtop.prototype = { 
config : null, 
backtop : null,// 当前创建返回顶端对象 
init : function() { 
this._scrool(); 
}, 
_scrool : function() { 
window.onscroll = function() { 
g._create_ob($(window).scrollTop()); 
}; 
}, 
_create_ob : function(top) { 
if(top==0){ 
$("#back_top").remove(); 
return; 
} 
$("#back_top").remove(); 
this.backtop = $("<div class='mouseover'><img src='ui/main/gotop.gif'></img></div>"); 
$(this.backtop).bind("click",function(){ 
g._moveTo(); 
}); 
$(this.backtop).bind("mouseover",function(){ 
$(g.backtop).removeClass(); 
$(g.backtop).addClass("mouse"); 
}); 
$(this.backtop).bind("mouseout",function(){ 
$(g.backtop).removeClass(); 
$(g.backtop).addClass("mouseover"); 
}); 
$(this.backtop).attr("id","back_top"); 
/*$(this.backtop).css("backgroundColor", this.config.df_color);*/ 
$(this.backtop).css("zIndex", 1000); 
$(this.backtop).css("position", "absolute"); 
$(this.backtop).css("cursor","pointer"); 
$(this.backtop).width(30); 
$(this.backtop).height(30); 
$(this.backtop).css("left",$("body").attr("clientWidth")-50); 
$(this.backtop).css("top", top+300); 
$("body").append(this.backtop); 
},// 创建返回顶端jquery对象 
_moveTo:function(){ 
$("#back_top").remove(); 
window.scroll(0,0); 
} 
}; 
})(jQuery); 
var extend = function($cf, options) { 
for ( var a in options) { 
$cf[a] = options[a]; 
} 
}; 

 

posted @ 2014-10-27 16:56  技术狂  阅读(528)  评论(1编辑  收藏  举报