自己写了一个基于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];
}
};

jquery 返回顶端组件的更多相关文章

  1. jquery的返回顶端的功能实现

    页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:

  2. jquery返回顶部,支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  3. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

  4. jQuery返回顶部(精简版)

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  5. 封装jQuery下载文件组件

    使用jQuery导出文档文件 jQuery添加download组件 jQuery.download = function(url, data, method){ if( url && ...

  6. 【转】25个非常实用的jQuery/CSS3应用组件

    今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...

  7. 25个非常实用的jQuery/CSS3应用组件

    今天分享25款功能十分强大的jQuery/CSS3应用插件,欢迎收藏. 1.jQuery水晶样式下拉导航 这是一款非常不错的jQuery多功能下拉菜单插件,菜单外观呈水晶样式,晶莹剔透,功能丰富,包含 ...

  8. Jquery 返回json数据在IE浏览器中提示下载的问题

    Jquery 返回json数据,IE浏览器提示下载的问题,当提交完数据后返回的本来是json数据的,在火弧里测试正常,解决方法如下 今天遇到Jquery 返回json数据,IE浏览器提示下载的问题,当 ...

  9. JS时间转换,url编码,jquery返回类型等问题

    1.当时间被转换为json格式后会被转换成 /Date(...)/ 这种格式,其中...为时间转换成妙后的一串整数 function changeDateFormat(cellval) { )); v ...

随机推荐

  1. ajax异步请求模式

    什么是异步请求 我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事 ...

  2. django设置数据库事务,通过异常处理回滚事务

    1.setting.py配置文件,开启事务ATOMIC_REQUESTS DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql' ...

  3. [JOISC2014]水筒

    OJ题号: BZOJ4242.AtCoder-JOISC2014E 题目大意: 给你一个h*w的网格图,每个格子可能是空地.障碍物和建筑物. 你只可以从空地上走过或者从建筑物中穿过. 建筑物总共有p个 ...

  4. python开发_tkinter_复选菜单

    在之前的blog中有提到python的tkinter中的菜单操作 python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 python开发_tkinter_窗口控件_自 ...

  5. Codeforces Round #350 (Div. 2) D1. Magic Powder - 1 二分

    D1. Magic Powder - 1 题目连接: http://www.codeforces.com/contest/670/problem/D1 Description This problem ...

  6. Codeforces Round #293 (Div. 2) D. Ilya and Escalator 概率DP

    D. Ilya and Escalator time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  7. SGU 405 Totalizator

    405. Totalizator Time limit per test: 0.25 second(s)Memory limit: 65536 kilobytes input: standardout ...

  8. Java Threads 多线程10分钟参考手册

    1         同步 如何同步多个线程对共享资源的访问是多线程编程中最基本的问题之一.当多个线程并发访问共享数据时会出现数据处于计算中间状态或者不一致的问题,从而影响到程序的正确运行.我们通常把这 ...

  9. C++反汇编-虚函数

    学无止尽,积土成山,积水成渊-<C++反汇编与逆向分析技术揭秘> 读书笔记 在C++中,使用关键字virtual声明为虚函数. 虚函数地址表(虚表) 定义:当类中定义有虚函数时,编译器会把 ...

  10. Linux内核hlist数据结构分析

         在内核编程中哈希链表hlist使用非常多,比方在openvswitch中流表的存储中就使用了(见[1]).hlist的表头仅有一个指向首节点的指针.而没有指向尾节点的指针,这样在有非常多个b ...