首页 > 代码库 > jquery 返回顶端组件

jquery 返回顶端组件

2024-07-29 13:39:29   219人阅读

自己写了一个基于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=http://www.mamicode.com/‘ui/main/gotop.gif‘>
"); $(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]; } };

 

jquery 返回顶端组件


联系
我们