这个插件功能在于当网页内容高度很高时，方便用户快速回到顶部。核心在于对屏幕高度的获取，定时器的使用，在引用代码后，只使用$.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回到首页的更多相关文章

  1. jQuery插件实例一：年华时代插件Alert对话框

    在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大.在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升.个人认为与 ...

  2. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  3. jQuery.qrcode二维码插件生成网页二维码

    如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了.但如果是地址不固定需要根据页面来生成的话.就有两种做法,一个是后端根据页面做一个动态的二维码.一种是前端使用插件生成. ...

  4. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  5. 一个很简单的jQuery插件实例教程(菜鸟级)

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...

  6. 简单的 jQuery 浮动层随窗口滚动滑动插件实例

    写了一个非常简单的 jQuery 插件实例  浮动层随窗口滚动滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  7. jquery二维码生成插件_二维码生成器

    jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar

  8. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  9. 如何使用jquery.qrcode.js插件生成二维码

    1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...

随机推荐

  1. spring中获取applicationContext

    常用的5种获取spring 中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象代码:ApplicationContext ac = new FileSystemXm ...

  2. Qt Model View 框架

    Model-View及Qt实现 Model-View-Controller架构最早出现在SmallTalk语言中,至今出现了很多变体. Model是负责维护数据(如管理数据库),View负责显示与用户 ...

  3. [Codeforces 925C]Big Secret

    Description 题库链接 给出 \(n\) 个数,让你生成这 \(n\) 个数的一个排列 \(A\) .定义 \(B_i = \bigoplus\limits_{j=1}^i A_j\) , ...

  4. DEV控件ASPxTextBox设置ClientEnabled="false"之后出现的问题

    DEV控件ASPxTextBox设置ClientEnabled="false"之后,js中设置文本框的值后,按钮后台点击事件中获取文本框的值为空.

  5. 【转】SQL SERVER 日期格式化

    0   或   100   (*)     默认值   mon   dd   yyyy   hh:miAM(或   PM)       1   101   美国   mm/dd/yyyy       ...

  6. jquery select change下拉框选项变化判断选中值

    <th class="formTitle"> 是否转出: </th> <td class="formValue" colspan= ...

  7. Jquery Easy UI初步学习(二)datagrid的使用

    第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样cl ...

  8. NSDictionary 和NSArray 排序（sort）

    排序: NSMutableDictionary *dic=[[NSMutableDictionary alloc]init]; [dic setValue:@"第3个" forKe ...

  9. Java多线程学习之线程的取消与中断机制

    任务和线程的启动很容易.在大多数情况下我们都会让他们运行直到结束,或是让他们自行停止.但是,有时我们希望提前结束任务或是线程,可能是因为用户请求取消,或是线程在规定时间内没有结束,或是出现了一些问题迫 ...

  10. LeetCode刷题第二天

    2.给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们 ...