博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 返回顶端组件
阅读量:7073 次
发布时间:2019-06-28

本文共 1480 字,大约阅读时间需要 4 分钟。

自己写了一个基于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 = $("
"); $(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]; } };

 

转载地址:http://sjkml.baihongyu.com/

你可能感兴趣的文章
使用echo命令清空tomcat日志文件
查看>>
Android开发怎么让自己的APP UI漂亮、大方(配色篇二)
查看>>
datetimerangepicker配置及默认时间段展示
查看>>
什么时候使用CountDownLatch
查看>>
InfluxDB部署
查看>>
Android 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突...
查看>>
windows平台下编辑的内容传到linux平台出现中文乱码的解决办法【转】
查看>>
js为元素动态添加css代码
查看>>
冒泡排序 和 归并排序
查看>>
软件包管理 之 用apt+synaptic 在线安装或升级Fedora core 4.0 软件包── 为新手指南...
查看>>
DBGRIDEH保存"显示标题"
查看>>
spring mvc3 example
查看>>
动态添加用户控件
查看>>
vimrc
查看>>
js 模块化
查看>>
C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 数据权限增强、范围权限增强...
查看>>
Linux启动过程
查看>>
122. Best Time to Buy and Sell Stock II
查看>>
V模型与测试级别
查看>>
Elasticsearch安装
查看>>