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 ...
随机推荐
- python配置文件编写
from configparser import ConfigParser # 配置类,专门来读取配置文件# 配置文件结尾:.ini .conf .config .properties .xml# 配 ...
- Spring Boot (24) 使用Spring Cache集成Redis
Spring 3.1引入了基于注解(annotation)的缓存(cache)技术,它本质不是一个具体的缓存实现方案,而是一个对缓存使用的抽象,通过在既有代码中添加少量它定义的个助攻annotatio ...
- Bootstrap3模态框Modal垂直居中样式
1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...
- 安卓发送图片文字，java后台接收
安卓使用retrofit2 和rxjava2 url: @Multipart @POST(UrlTools.STORYUPLOAD) Observable<Result> saveRepo ...
- JS——轮播图高级版
需求: 1.页面需要小图标和箭头 2.定时器不断的滑动图片 3.在点击箭头时,图标和图片随即做出响应 核心思想: 1.往左移动到第一张的情况:在第二张移动到第一张时,这个动画效果完成之后,立刻将ul的 ...
- python函数参数的区别
在运用python的过程中,发现当函数参数为list的时候,在函数内部调用list.append()会改变形参,与C/C++的不太一样,查阅相关资料,在这里记录一下. python中id可以获取对象的 ...
- 【sqli-labs】 less59 GET -Challenge -Double Query -5 queries allowed -Variation2 (GET型 挑战 双查询 只允许5次查询 变化2)
整型的注入 http://192.168.136.128/sqli-labs-master/Less-59/?id=1 or UpdateXml(1,concat(0x7e,database(),0x ...
- tac
功能说明:反向显示文件内容. 参数选项: -b 在行前而非行尾加分隔标志. -r 将分隔标志视作正则表达式来解析. -s 使用指定字符串代替换行作为分隔标志. cat命令与tac命令的对比:
- HDU_1063_Exponentiation_大数
Exponentiation Time Limit: 2000/500 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- rxswift-self.usernameTF.rx.text.orEmpty.map
self.usernameTF.rx.text.orEmpty.map 一堆类型转化+数据处理的操作 self.usernameTF.rx:将textfiled用Reactive封装: .text:监 ...