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. 使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手

    TCP 三次握手 示意图 Wireshark 抓包注意事项 为了演示一个TCP三次握手建立连接的过程,我们通过 Chrome 访问一个网页. 已知 HTTP 协议就是建立在TCP链接上的 比如访问以下 ...

  2. mysql 去除重复数据

    1. 问题描述 有时load或者insert操作导致 表数据有重复 2. 解决方案 通过临时表.主键id.倒腾去重 示例 2.1  create table student( name varchar ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. Java jdbc入门

    1 jdbc入门 1.1 之前操作数据 1)通过mysql的客户端工具,登录数据库服务器  (mysql -u root -p 密码) 2)编写sql语句 3)发送sql语句到数据库服务器执行 1.2 ...

  5. Eclipse开发工具printf打印方法提示报错的解决方法

    最近在学习java,在练习printf方法的使用时按照书上的语法配置却出现了报错.报错内容为:The method printf(String, Object[]) in the type Print ...

  6. UMTSkeeper: keep your UMTS/GPRS/GSM connection alive automatically

    UMTSkeeper: keep your UMTS/GPRS/GSM connection alive automatically by Elias from Mintaka This page i ...

  7. Tesseract-OCR-03-图片文字识别

    Tesseract-OCR-03-图片文字识别 本篇介绍使用 Tesseract-OCR 做图片文字识别,识别手写文字的时候,正确率能达到 90%,当训练后正确率是极高的.这里介绍的图片文字识别,可以 ...

  8. Python爬虫教程-31-创建 Scrapy 爬虫框架项目

    本篇是介绍在 Anaconda 环境下,创建 Scrapy 爬虫框架项目的步骤,且介绍比较详细 Python爬虫教程-31-创建 Scrapy 爬虫框架项目 首先说一下,本篇是在 Anaconda 环 ...

  9. 求解2的N次幂的问题（多种方法）

    #include <iostream> using namespace std; //计算2的N次幂 //一般方法,时间复杂度为2^n __int64 pow2(int n) { __in ...

  10. MySQL案例02：ERROR 1221 (HY000): Incorrect usage of DB GRANT and GLOBAL PRIVILEGES

    MySQL在授权用户时出现报错信息,具体信息如下: 一.错误信息 执行命令: GRANT SELECT,INSERT, UPDATE, DELETE, CREATE, DROP, RELOAD, SH ...