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

    好记忆不如烂笔头: #__author:Mifen #date: 2018/11/28 #不可变类型:整型,字符串,浮点型(不等于小数,但包括小数),元组(只读,不可修改) #可变类型:列表,字典(键 ...

  2. Aviator 表达式求值引擎开源框架

    简介¶ Aviator是一个高性能.轻量级的java语言实现的表达式求值引擎,主要用于各种表达式的动态求值.现在已经有很多开源可用的java表达式求值引擎,为什么还需要Avaitor呢? Aviato ...

  3. [转]Sql Server Report Service 的部署问题

    本文转自:https://www.cnblogs.com/syfblog/p/4651621.html 近期在研究SSRS部署问题,因为以前也用到过SSRS报表,但当时开发的报表是有专门的集成系统的, ...

  4. jQuery操作<input type="radio">

    input type="radio">如下: <input type="radio" name="city" value=&qu ...

  5. Java虚拟机基础知识你知道多少？

    http://www.cnblogs.com/qlky/p/7401841.html java虚拟机结构 http://liuwangshu.cn/java/jvm/1-runtime-data-ar ...

  6. 算法 - Catalan数 （卡特兰）

    http://blog.csdn.net/linhuanmars/article/details/24761459 https://zh.wikipedia.org/wiki/%E5%8D%A1%E5 ...

  7. 在pom.xml中添加Spring依赖

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  8. gulp自动化打包及静态文件自动添加版本号

    前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...

  9. BZOJ4466 [Jsoi2013]超立方体

    Description 定义"超立方图"为:有\(2^k\)个点,以\(k\)位二进制数编号,两个点之间有边当且仅当它们的编号恰有一位不同.给出一个图,问它是否与"超立方 ...

  10. arcgis10.3下载，arcgis pro的下载地址

    链接:http://pan.baidu.com/s/1eQ2BkCM 密码:fmkh