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

    list&tuple&dict list list 常见操作 初始化: list1 = [123, 'abc', 4.56, ['inner', 'list'], 7-9j] list ...

  2. 牛客网剑指offer java 全部题解

    经过数月的努力,终于更完了牛客网的66道剑指offer,以下的顺序和大家在牛客网的顺序是一样的(排序也花了不少时间),希望对大家找工作/提高算法能力能起到些许帮助. 每天一道剑指offer-二维数组中 ...

  3. Matlab基本数学应用

    基本线性代数 [R jb]=rref(A)将A化为行最简型矩阵.R为所得行最简型矩阵,jb是一个向量显示每行首非0元所在列号. inv(A)求方阵A的逆,注意结果可能出现错误.当结果中出现Inf和Na ...

  4. session中用户信息改变问题

    问题描述: 在web项目中,我们经常将用户登录信息放在session中用来做后续的权限判断等操作,但最近在项目中发现一个奇怪的现象,session中的用户信息和登录时的信息有了差异. 原因: 在后台代 ...

  5. api.closeFrame

    关闭frame closeFrame({params}) params name: 类型:字符串 默认值:无 描述:(可选项)frame 名字,不传时关闭当前 frame 示例代码 api.close ...

  6. Head First Python学习笔记2——文件与异常

    文件处理 1.用open()就可以打开文件,但是请注意:文件里有中文请设置编码,如 :open("filepath","r",encoding="ut ...

  7. plupload如何删除一条数据

    FilesRemoved用了发现不成功,删除图片这么重要怎能如此 看到老外提的另一个问题发现这个问题解决办法,特此备注以供不会的童鞋参考 uploader.bind('FilesAdded', fun ...

  8. iOS开发消息推送原理

    转载自:http://www.cnblogs.com/cdts_change/p/3240893.html 一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Prov ...

  9. Spring Security 安全框架

    一 简介:Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spr ...

  10. WCF使用net.tcp传输文件

    摘要:今天看了一些官方的资料和配置,简单写了一个WCF服务来传递一个文件,借此看看WCF传输大文件的能力,这里采用的是NetTcp绑定,之所以没有采用 basicHttpBinding是因为考虑这种方 ...