一个简单返回顶端的jquery插件

Js代码:

View Code

(function ($) {$.fn.gotop = function (options) {var settings = $.extend({'content': 980,'bottom': 30,'margin': "none",'position': "right",'scrollTop': 100,'duration': 700}, options);var win = $(window);var top = this;//is there some place for my return to the top button?
        function hasPlace() {var place = true;if (settings.margin == "none") {if (win.width() < (settings.content + (top.width() * 2) + 4)) place = false;}else {if (win.width() < (settings.content + ((top.width() + settings.right) * 2) + 4)) place = false;}return place;}//Put our return to top button at his place
        function placeTop() {var pos = (((win.width() - settings.content) / 2) - top.width()) / 2;if (settings.position == "left" || settings.position == "l") top.css({ "left": pos + "px" });else top.css({ "right": pos + "px" });}//Can we show this button?
        function showTop() {if (win.scrollTop() > settings.scrollTop) {top.fadeIn();if ($.browser.msie && ($.browser.version == "6.0")) {var thisTop = win.scrollTop() + win.height() - top.height()- settings.bottom;top.css("top", thisTop + "px");}}else top.fadeOut();}if (!hasPlace()) this.hide();if (settings.margin == "none") placeTop();else if (settings.position == "left" || settings.position == "l") top.css({ "left": settings.margin + "px" });else top.css({ "right": settings.margin + "px" });showTop();//RESIZE
        win.resize(function () {if (hasPlace()) top.fadeIn();else top.fadeOut();if (settings.margin == "none") placeTop();});//SCROLL
        win.scroll(function () {showTop();});if ($.browser.msie && ($.browser.version == "6.0")) {top.css({ "position": "absolute", "cursor": "pointer" });} else {top.css({ "position": "fixed", "cursor": "pointer", "bottom": settings.bottom + "px" });}return top.click(function () {$('body,html').animate({ scrollTop: 0 }, settings.duration);});};
})(jQuery);

调用:

View Code

<script type="text/javascript">$(function () {$('.gotop').gotop({});});
</script>
<div class="gotop"><img title="回到顶部" src="go-top.gif" alt="Top"/></div>

转载于:https://www.cnblogs.com/lambert-li/archive/2012/04/18/2455755.html

jquery gotop插件相关推荐

  1. jQuery.fly插件实现添加购物车抛物线效果

    样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...

  2. jquery倒计时插件可自定义多个倒计时间

    jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  3. jQuery 表格插件汇总

    本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...

  4. 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类

    Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...

  5. JQuery模板插件jquery.tmpl-动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...

  6. ajax异步后台存放购物车表,jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)...

    本文实例讲述了jQuery购物车插件jsorder用法.分享给大家供大家参考,具体如下: JSORDER 案例 案例一:我的菜单(点击菜名即可加入菜单) 红烧豆腐 12元 毛血旺 32元 套餐:京酱肉 ...

  7. java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据

    2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...

  8. 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)

    花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

  9. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过"$( "#slider" ).slider();"的方式 ...

  10. html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件

    smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...

最新文章

  1. 响应式布局设备分界点
  2. let's encrypt部署免费泛域名证书
  3. 学会python之后-【一点资讯】学会Python后,人生简直开挂了!
  4. windows主机用scp命令向Linux服务器上传和下载文件
  5. 8086内存分段理解
  6. EF lamda表达式模糊查询关键字字符串数组
  7. 审计 Linux 系统的操作行为的 5 种方案对比
  8. 特定场景下取代if-else和switch的方式
  9. python数据库实例_Python3.6简单的操作Mysql数据库的三个实例
  10. java客户端连接请求发不出去_java – Spring:客户端发送的请求在语法上不正确()...
  11. java键盘监听keyadapter_JAVA 键盘监听当中,释放键盘并没有停止运动
  12. 在vs2008工程中制作cab包
  13. Oracle分区交换
  14. 谷歌翻译API-python接口-Googletrans
  15. JESD204B调试笔记(实用版)
  16. 目前网站挂马检测工具有哪些?如何防止网站被挂马!
  17. 研发管理进阶:边怼人边改进
  18. JavaScript实现购物车计算价格功能
  19. 突然远程桌面连接不上
  20. springboot 中动态切换数据源(多数据源应用设计)

热门文章

  1. 中国食品甘油行业市场供需与战略研究报告
  2. 基于高德api的地区全类poi爬取
  3. Python3官方手册中文在线版
  4. 定制Linux系统安装盘,syslinux定制系统启动盘
  5. wakeup_in休眠唤醒
  6. Android P wakeup 亮屏流程
  7. Minio过期分片上传文件清理引出的系统配置
  8. 父亲节php源码,剑盟社区-【父亲您在,世界就在】6月20日父亲节系列活动
  9. PPT精美模板免费下载网站 高清壁纸免费下载网站 在线PS(Photoshop在线网站)网站 分享
  10. 产品读书《谷歌和亚马逊如何做产品》