javascript返回顶部插件+源码
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返回顶部插件+源码的更多相关文章
- WEB前端--返回顶部特效源码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- vue打包时，assets目录 和static目录下文件的处理区别（nodeModule中插件源码修改后，打包后的文件应放在static目录）
为了回答这个问题,我们首先需要了解Webpack如何处理静态资产.在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL.例如 ...
- 如何查看google chrome 插件源码
常用浏览器google chrome 有很多优秀的插件,寂寞的时候想看看人家是怎么实现的,说是快那就动手吧 插件代码位置 本人mac笔记本,chrome 插件位置如下 $ cd /Users/vin ...
- Ocelot简易教程（七）之配置文件数据库存储插件源码解析
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...
- 基于tomcat插件的maven多模块工程热部署（附插件源码）
内容属原创,转载请注明出处 写在前面的话 最近一直比较纠结,归根结底在于工程的模块化拆分.以前也干过这事,但是一直对以前的结果不满意,这会重操旧业,希望搞出个自己满意的结果. 之前有什么不满意的呢? ...
- vue点击返回顶部插件vue-totop
vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...
- Maven 依赖调解源码解析（二）：如何调试 Maven 源码和插件源码
本文是系列文章<Maven 源码解析:依赖调解是如何实现的?>第二篇,主要介绍如何调试 Maven 源码和插件源码.系列文章总目录参见:https://www.cnblogs.com/xi ...
- JavaScript滚动条插件源码
这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表 ...
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
随机推荐
- ApplicationContextAware接口
在某些特殊的情况下,Bean需要实现某个功能,但该功能必须借助于Spring容器才能实现,此时就必须让该Bean先获取Spring容器,然后借助于Spring容器实现该功能.为了让Bean获取它所在的 ...
- json转换工具类
using System;using System.Collections.Generic;using System.Text;using Newtonsoft.Json;using System.I ...
- Java设计模式—原型模式
原型设计模式是一种比较简单的设计模式,在项目中使用的场景非常多. 个人理解: 原型模式实现了对Java中某个对象的克隆功能,即该对象的类必须implements实现Cloneable接口来标识为可被克 ...
- Java设计模式—观察者模式
观察者模式(Observer Pattern)也叫做发布订阅模式(Publish/subscribe). 其定义如下: 定义对象间一种一对多的依赖关系,使得每当一个对象改变状态,则所有依赖于它的对象都 ...
- MSSQLServer——全国省份城市SQL语句
use hr create table dbo.province ( proID int primary key, proName ), keys ) ) ,'北京市','B'); ,'天津市','T ...
- SQL Server ->> 校检函数CHECKSUM、CHECKSUM_AGG、BINARY_CHECKSUM和HASHBYTES
今天特地查了一下SQL Server下的校检函数有哪些.原本我只是在工作中用过一个CHECKSUM,今天特地学习了一下才发现原来还有其他的校检函数. 这里找到了别人对于SQL SERVER下这几个校检 ...
- Python学习---重点模块之pickle
仅仅支持Python里面的函数等相关功能的实现,而且pickle写入的内容是看不出来的,读取的时候要求有原内容 pickled的写入: import pickle def fun(): print(' ...
- Eclipse版本推荐（tomcat运行项目：web、maven）
1.区别 Eclipse根据特性和jdk版本,从Eclipse官网可看到,分为:Neon/Oxygen/Mars/Luna/Kepler/Juno/Indigo/Helios...等等. Eclips ...
- Docker的安装及加速
使用 yum 安装(CentOS 7下) Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 uname ...
- 学习Road map Part 03 编程和算法
方法: 优先重复已学过的内容 写学习笔记