jquery gotop插件
一个简单返回顶端的jquery插件
Js代码:
(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);
调用:
<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插件相关推荐
- jQuery.fly插件实现添加购物车抛物线效果
样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
- jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
- 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
- ajax异步后台存放购物车表,jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)...
本文实例讲述了jQuery购物车插件jsorder用法.分享给大家供大家参考,具体如下: JSORDER 案例 案例一:我的菜单(点击菜名即可加入菜单) 红烧豆腐 12元 毛血旺 32元 套餐:京酱肉 ...
- java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过"$( "#slider" ).slider();"的方式 ...
- html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
最新文章
- 响应式布局设备分界点
- let's encrypt部署免费泛域名证书
- 学会python之后-【一点资讯】学会Python后,人生简直开挂了!
- windows主机用scp命令向Linux服务器上传和下载文件
- 8086内存分段理解
- EF lamda表达式模糊查询关键字字符串数组
- 审计 Linux 系统的操作行为的 5 种方案对比
- 特定场景下取代if-else和switch的方式
- python数据库实例_Python3.6简单的操作Mysql数据库的三个实例
- java客户端连接请求发不出去_java – Spring:客户端发送的请求在语法上不正确()...
- java键盘监听keyadapter_JAVA 键盘监听当中,释放键盘并没有停止运动
- 在vs2008工程中制作cab包
- Oracle分区交换
- 谷歌翻译API-python接口-Googletrans
- JESD204B调试笔记(实用版)
- 目前网站挂马检测工具有哪些?如何防止网站被挂马!
- 研发管理进阶:边怼人边改进
- JavaScript实现购物车计算价格功能
- 突然远程桌面连接不上
- springboot 中动态切换数据源(多数据源应用设计)