这个插件功能在于当网页内容高度很高时，方便用户快速回到顶部。核心在于对屏幕高度的获取，定时器的使用，在引用代码后，只使用$.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. ASP .NET Core 基本知识点示例 目录

    ASP.NET Core 的 运行机制 文章 ASP.NET Core 中的 配置 文章 源代码 ASP.NET Core 中的 依赖注入 文章 源代码 ASP.NET Core 中的 日志 文章 源 ...

  2. BI实战派：医疗BI项目落地方案

    任何BI项目面临的两大难题是项目价值和基础数据,BI项目应该给企业带来管理优化.业绩增长.医院面临的两大难题,一:绩效管理(奖金分配):二:医患关系:在医院开始自负盈亏时日常基本运营管理显得非常重要. ...

  3. 关于 centos 7系统，iptables透明网桥实现

    首先建立网桥:(使用bridge)    示例 桥接eth0 与 eth1 网口 /sbin/modprobe bridge /usr/sbin/brctl addbr br0 /sbin/ifup ...

  4. Mysql——权限管理

    安装Mysql时会自动安装一个名为mysql的数据库.这个数据库下面存储的是权限表. mysql> show databases; +--------------------+ | Databa ...

  5. 把AspDotNetCoreMvc程序运行在Docker上-part4：实现负载均衡

    在上一part<把AspDotNetCoreMvc程序运行在Docker上-part3:使用独立的存储容器>,我们利用MySql容器和Volume实现了真正意义上的数据存储.整个结构非常简 ...

  6. 网络爬虫（一）：配置selenium、pycharm（windows平台）

    最近在学习爬虫的编写,使用selenium模块时候,遇到了很多坑,本blog的目的是总结一下遇到的坑和解决办法,以便后来人少走弯路! 以下介绍均以Python3.x为基准进行,基于windows平台的 ...

  7. 消息队列系列（二）：.Rabbitmq的使用及Web监控工具使用

    一.文档资料        1.官方网站:http://www.rabbitmq.com/        2.安装教程:http://www.rabbitmq.com/install-windows. ...

  8. BG.Hadoop.Master

    1. 安装JDK JDK安装包复制到/opt文件夹 cd /opt rpm -ivh jdk-8u121-linux-x64.rpm vim /etc/profile 增加 JAVA_HOME=/us ...

  9. C# 接口的隐式与显示实现及适应场景

    通俗的来讲,“显示接口实现”就是使用接口名称作为方法名的前缀;而传统的实现方式称之为:“隐式接口实现”.废话不说,例子如下: interface IAnimal { void Dog(); } cla ...

  10. 3.C#基础篇-->堆和栈

    一.前言 堆与栈对于理解.NET中的内存管理.垃圾回收.错误和异常.调试与日志有很大的帮助.垃圾回收的机制使程序员从复杂的内存管理中解脱出来,虽然绝大多数的C#程序并不需要程序员手动管理内存,但这并不 ...