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界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
随机推荐
- 三、Bean的初始化
一.使用构造器实例化Bean:这是最简单的方式,Spring IOC容器既能使用默认空构造器也能使用有参构造器两种方式创建bean 空构造器 <bean name="bean1&quo ...
- python文件修改 核心5步，函数实现修改任意文件内容
文件修改 核心5步1.以读的模式打开原文件,产生句柄f12.以写的模式打开一个新文件,产生句柄f23.读取原文件的内容并将原文件需要替换的内容修改写入到新文件4.删除原文件5.把新文件重名了成原文件 ...
- JS里的居民们6-数组排序
编码 var arr = [43, 54, 4, -4, 84, 100, 58, 27, 140]; 将上面数组分别按从大到小以及从小到大进行排序后在console中输出 var arr = ['a ...
- alert 多语言的处理
1. code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- css的字体样式怎么写
为保证字体的正常加载 sans-serif不能丢 font-family:'MicrosoftYahei','微软雅黑',Arial,'宋体',sans-serif;
- opencv 从摄像头中读取视频并保存（c++版）
原文:http://blog.csdn.net/zhongshijunacm/article/details/68947890 OpenCV中的视频操作函数如下表所列: VideoCapture Vi ...
- Installing TensorFlow on Ubuntu
1.安装方法有4种,官方推荐是第一种. virtualenv(官方推荐) "native" pip Docker Anaconda 2.基于virtualenv的 ...
- 【Leetcode】【Medium】Rotate List
Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...
- windows系统的错误码
https://blog.csdn.net/u011785544/article/details/51682290
- linux命令整理
Linux系统命令 1. ls 查看某个 目录下 所有文件的大小总和 ls -lR| awk 'BEGIN{size=0;} /^[-l]/{size+=$5;print $0;} END{print ...