javascript插件->returnTop.js：

		/*

　　　　　　　　 ** 插件名称returnTop.js

		 ** 调用返回头部单例参数说明

		 ** 调用方式：turn.init(ele,speed);

		 ** oDiv ：就是获取返回图标元素

		 ** speed ：返回顶部时间的快慢，值越大返回的越快

		*/

		var turnTop = {};

		turnTop.init=function(ele,speed){

		    turnTop.eve(ele);

		    turnTop.speed = speed;

		};

		turnTop.eve = function(ele){

		    window.onscroll = function(){

		        if(turnTop.docEleTop ()>0){

			    ele.style.display = "block";

			}else{

			    ele.style.display = "none";

			}

		     };

		     ele.onclick = function(){

			 turnTop.docEleTop ();

			 var timer = setInterval(function(){

			     if(parseInt(turnTop.docEleTop ()) > 0){

				 document.documentElement.scrollTop = document.body.scrollTop = parseInt(turnTop.docEleTop ())-turn.speed;

			     }else{

				 clearInterval(timer);

			     }

			  },100)

	              };

		};

		turnTop.docEleTop = function(){

		    return document.documentElement.scrollTop || document.body.scrollTop;

		};

　　

　　html页面调用：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    #turnTop{

      background: url(http://www.zcool.com.cn/images/goTopZcool.png);

      width: 34px;height: 100px;display:none;position:fixed;bottom:20px;right:40px;

    }

  </style>

</head>

<body style="padding-top:3000px;">

  <div id="turnTop"></div>
  <script src="returnTop.js"></script>

  <script>

    var oDiv = document.getElementById("turnTop");

    turnTop.init(oDiv,100);

  </script>

</body>

</html>

　　

javascript返回顶部插件+源码的更多相关文章

  1. WEB前端--返回顶部特效源码

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  2. vue打包时，assets目录 和static目录下文件的处理区别（nodeModule中插件源码修改后，打包后的文件应放在static目录）

    为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...

  3. 如何查看google chrome 插件源码

    常用浏览器google chrome 有很多优秀的插件,寂寞的时候想看看人家是怎么实现的,说是快那就动手吧 插件代码位置 本人mac笔记本,chrome 插件位置如下 $ cd  /Users/vin ...

  4. Ocelot简易教程（七）之配置文件数据库存储插件源码解析

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...

  5. 基于tomcat插件的maven多模块工程热部署（附插件源码）

    内容属原创,转载请注明出处 写在前面的话 最近一直比较纠结,归根结底在于工程的模块化拆分.以前也干过这事,但是一直对以前的结果不满意,这会重操旧业,希望搞出个自己满意的结果. 之前有什么不满意的呢? ...

  6. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  7. Maven 依赖调解源码解析（二）：如何调试 Maven 源码和插件源码

    本文是系列文章<Maven 源码解析:依赖调解是如何实现的?>第二篇,主要介绍如何调试 Maven 源码和插件源码.系列文章总目录参见:https://www.cnblogs.com/xi ...

  8. JavaScript滚动条插件源码

    这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表 ...

  9. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

随机推荐

  1. IDEA创建Maven项目和子模块

    一.新建Project a. 新建项目,点击Create New Project b. 选择使用maven来新建项目 选择新建Maven模块(对IDEA来说是项目) 如果Project SDK那里没有 ...

  2. C# WCF服务入门

    之前在公司用的服务端是wcf写的,但是没有深入研究,最近找工作,面试的时候好多人看到这个总提问,这里做个复习 就用微软官方上的例子,搭一个简单的wcf服务,分6步 1 定义服务协定也就是契约,其实就是 ...

  3. CSS 3动画

    CSS 3在原来的基础上新增了变形和动画相关的属性,通过这些属性可以实现以前需要大段JavaScript才能实现的功能.css 3的变形功能可以对HTML元素执行位移.旋转.缩放.倾斜4种几何变换,借 ...

  4. Angular1组件通讯方式总结

    这里需要将Angular1分为Angular1.5之前和Angular1.5两个不同的阶段来讲,两者虽然同属Angular1,但是在开发模式上还是有较大区别的.在Angular1.4及以前,主要是基于 ...

  5. 12_Redis缓存穿透

    [何为缓存穿透] 缓存穿透是查询一个一定不存在的数据,这样的请求都要到存储层MySql去查询,失去了缓存的意义,在流量大时,可能MySql就挂掉了,要是有人利用不存在的key频繁攻击我们的应用,这就是 ...

  6. android webview 播放 video经验总结

    在目前PC浏览器上,对video的支持基本都没什么问题了.但是如果用webview去跑这样的页面就会遇到许多问题. 下面一段html <!DOCTYPE html> <html> ...

  7. Java 调用 Rest api 设置经典 Linux 虚拟机的实例启停

    现象描述 用户可以通过 Rest API 设置经典 Linux 虚拟机实例的启停.在调用该 API 时需要通过 Azure Active Directory(下文简称 AAD) 获取 Token,但是 ...

  8. Linux ->> Apt-get命令安装软件

    Apt全称Advanced Package Tool.Apt-get适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. 用法: apt-cache ...

  9. Microsoft Office ->> 完整卸载Office 2007

    今天用GHOST安装了Windows 8.1,结果发现预装了Office 2007,而且这个GHOST系统的Office 2007还不是很正规的安装手法安装的.它没有在注册表中注册.在打开控制面板后发 ...

  10. SQL Server 使用 OUTPUT做数据操作记录

    OUTPUT 子句 可以在数据进行增删改的时候,可以返回受影响的行.先准备一张表 create table #t ( id int identity primary key ,name ) ) go ...