jQuery插件实例二:年华时代插件ReturnTop回到首页
这个插件功能在于当网页内容高度很高时,方便用户快速回到顶部。核心在于对屏幕高度的获取,定时器的使用,在引用代码后,只使用$.nhsd.returnTop();即可实现效果
效果图:
代码:
;
function nhsdpageScroll() {
var timeInterval;
if ((document.documentElement.scrollTop + document.body.scrollTop) == 0) {
clearTimeout(timeInterval);
}
else {
window.scrollBy(0, -1000);
timeInterval = setTimeout("nhsdpageScroll();", 100);
}
}
jQuery.nhsd = {
returnTop: function () {
$opts = {
backgroundImage: '/Images/Extend/top1.png'
};
viewHeight = window.screen.availHeight;//屏幕可用工作区高度
$returnTopDiv = $('<div></div>').appendTo($('body'));
$returnTopDiv.attr('style', 'display:none;width:45px;height:45px;background-color: #392e5c;position: fixed;right: 25px;bottom: 25px;z-index:20;');
$topDiv = $('<a href="javascript:void(0);"></a>').html("").appendTo($returnTopDiv);
$topDiv.attr('style', 'width:45px;height:45px;display: block;background-image:url(' + $opts.backgroundImage + ')');
$topDiv.bind('click', function () {
nhsdpageScroll();
});
window.onscroll = function () {
if ((document.documentElement.scrollTop + document.body.scrollTop) > 0) {
$returnTopDiv.show();
} else {
$returnTopDiv.hide();
}
}
//Uncaught SyntaxError: Unexpected token ):'<a href="javascript:void(0);"></a>'少void(0)中的'0'
}
}
调用:
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/Extend/jquery-1.9.1.min.js"></script>
<script src="/Scripts/Extend/nhsdReturnTop.js"></script>
<title>ReturnTopZ</title>
</head>
<body>
<div id="vb">
456
</div>
<div class="vb">
456
</div>
<script type="text/javascript">
$.nhsd.returnTop();
for (var i = 0; i < 100; i++) {
$('<a href="javascript:void(0);">' + i + '</a>').appendTo($('body'));
$('<br/>').appendTo($('body'));
}
</script>
</body>
</html>
jQuery插件实例二:年华时代插件ReturnTop回到首页的更多相关文章
- jQuery插件实例一:年华时代插件Alert对话框
在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大.在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升.个人认为与 ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- jQuery.qrcode二维码插件生成网页二维码
如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了.但如果是地址不固定需要根据页面来生成的话.就有两种做法,一个是后端根据页面做一个动态的二维码.一种是前端使用插件生成. ...
- 动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
- 一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
- 简单的 jQuery 浮动层随窗口滚动滑动插件实例
写了一个非常简单的 jQuery 插件实例 浮动层随窗口滚动滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- 【jQuery小实例】js 插件 查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
- 如何使用jquery.qrcode.js插件生成二维码
1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...
随机推荐
- spring中获取applicationContext
常用的5种获取spring 中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象代码:ApplicationContext ac = new FileSystemXm ...
- Qt Model View 框架
Model-View及Qt实现 Model-View-Controller架构最早出现在SmallTalk语言中,至今出现了很多变体. Model是负责维护数据(如管理数据库),View负责显示与用户 ...
- [Codeforces 925C]Big Secret
Description 题库链接 给出 \(n\) 个数,让你生成这 \(n\) 个数的一个排列 \(A\) .定义 \(B_i = \bigoplus\limits_{j=1}^i A_j\) , ...
- DEV控件ASPxTextBox设置ClientEnabled="false"之后出现的问题
DEV控件ASPxTextBox设置ClientEnabled="false"之后,js中设置文本框的值后,按钮后台点击事件中获取文本框的值为空.
- 【转】SQL SERVER 日期格式化
0 或 100 (*) 默认值 mon dd yyyy hh:miAM(或 PM) 1 101 美国 mm/dd/yyyy ...
- jquery select change下拉框选项变化判断选中值
<th class="formTitle"> 是否转出: </th> <td class="formValue" colspan= ...
- Jquery Easy UI初步学习(二)datagrid的使用
第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样cl ...
- NSDictionary 和NSArray 排序(sort)
排序: NSMutableDictionary *dic=[[NSMutableDictionary alloc]init]; [dic setValue:@"第3个" forKe ...
- Java多线程学习之线程的取消与中断机制
任务和线程的启动很容易.在大多数情况下我们都会让他们运行直到结束,或是让他们自行停止.但是,有时我们希望提前结束任务或是线程,可能是因为用户请求取消,或是线程在规定时间内没有结束,或是出现了一些问题迫 ...
- LeetCode刷题第二天
2.给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们 ...