JS 带运动的返回顶部 小案例
带运动的返回顶部：当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器。下面的方法b 就是清掉的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>6.带运动的返回顶部</title>
<meta name="author" content="Administrator" />
<!-- Date: 2014-12-12 -->
<style>
#goTop{width:50px;height:50px;border-radius:5px;background:#006666;position:fixed;right:10px;bottom:10px;text-align:center;line-height:50px;}
</style>
<script>
/**滚动条 带运动返回顶部
* 运动的值就是 滚动条距离文档顶部的距离,在定时器内获取值
* 速度 就是目标点(0-当前的scrollTop)/8
* 滚动距离赋值的时候需要连等：
* document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed**/
window.onload=function(){
var oDiv=document.getElementById('goTop');
var timer=null;
var b=1;
function setTop(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
} window.onscroll=function(){ if( b!=1 ){ //如果b=1,那么b是被定时器触发的,如果不等,就是被其他事件触发,这个时候就要关掉定时器
clearInterval(timer);
}
b=2
} oDiv.onclick=function(){
clearInterval(timer)
timer=setInterval(function(){
var iCur = document.documentElement.scrollTop || document.body.scrollTop;
var iSpeed = Math.floor((0 - iCur)/8); document.documentElement.scrollTop=document.body.scrollTop= iCur +iSpeed;
b=1; if(iCur == 0){
clearInterval(timer)
} },30)
}
}
</script>
</head>
<body style="height:2000px;">
<div id="goTop">Top</div>
</body>
</html>
JS 带运动的返回顶部 小案例的更多相关文章
- JS 缓冲运动 带运动的留言本 小案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- js返回顶部小Demo
<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
- jQuery---小火箭返回顶部案例
小火箭返回顶部案例 1. 滚动页面,当页面距离顶部超出1000px,显示小火箭. 封装在scroll函数里,当前页面距离顶部为$(window).scrollTop >=1000 小火箭显示和隐 ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 使用jQuery实现返回顶部功能
<p id="back-to-top"><a href="#top"><span></span>返回顶部< ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
随机推荐
- [Swift通天遁地]三、手势与图表-(7)创建饼形图表并导出图表为PNG图片
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- SQLYog 快捷键
SQLYog常用快捷键 Ctrl+M 创建一个新的连接Ctrl+N 使用当前设置新建连接Ctrl+F4 断开当前连接 对象浏览器F5 刷新对象浏览器(默认)Ctr ...
- Win7 + VS2015 + Python3.6编译
0. 下载安装hg. http://bitbucket.org/tortoisehg/files/downloads/tortoisehg-4.0.1-x64.msi 1. 下载Python3.6源代 ...
- 基于Android SDK安装PhoneGap框架
下载zip文件PhoneGap 2.0.0 PhoneGap 2.0.0 Released 20 Jul 2012http://phonegap.com/download/ 解压缩后的目录结构:Dir ...
- 【知识总结】回文自动机（Palindrome_Automaton）
参考资料:Palindromic Tree--回文树[处理一类回文串问题的强力工具](请注意,其中似乎有一些错误) 回文自动机似乎和回文树是同一个东西qwq? 回文自动机(PAM)是一种处理回文串的工 ...
- java 重载父类报错 Remove '@override' annotation解决办法
Remove '@override' annotation解决办法 最近刚刚配置了新机器,将原来的代码放在eclipse上执行,总会出现Remove '@override' annotati ...
- Spring Cloud (7) 服务容错保护-Hystrix服务降级
在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以互相调用,在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务通常会集群 ...
- Mysql(三):多表查询和存储程序
今天内容: ● 多表查询(内连接 外连接 子查询) ● 存储程序(存储过程 函数) 多表查询 同时从多张数据表中查取到需要的数据即是多表查询. 多表查询时,参与查询的表中每条数据进行组合,这种效果 ...
- 使用Dreamweaver在一张图片上添加多个热点链接
所有代码: <html> <head> <meta charset="utf-8"> <title>无标题文档</title& ...
- (转）容易遗忘的JS知识点整理
1.hasOwnProperty相关 为了判断一个对象是否包含自定义属性而不是原型链上的属性,我们需要使用继承自 Object.prototype 的 hasOwnProperty方法.hasOwnP ...