JS 回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#goTop{
display:none;
position:fixed;
bottom:20px;
background:url(http://cdn.w3cfuns.com/resource/images/scrolltop.png) no-repeat 0 0;
width:34px;
height:34px;
cursor:pointer;
right:20px;
}
</style>
<script>
window.onload=function(){
var timer=null;
var goTop=document.getElementById("goTop");
goTop.onclick=function(){
timer=setInterval(function(){
var top=document.body.scrollTop+document.documentElement.scrollTop;
var speed=top/5;
if(document.body.scrollTop){
document.body.scrollTop-=speed;
}
else{
document.documentElement.scrollTop-=speed;
}
if(top==0){
clearInterval(timer);
}
},30);
};
window.onscroll=function(){
if(document.body.scrollTop+document.documentElement.scrollTop>=500){
goTop.style.display="block";
}
else{
goTop.style.display="none";
}
};
};
</script>
</head>
<body>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<p>123</p><br/>
<span id="goTop"></span>
</body>
</html>
JS 回到顶部的更多相关文章
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- js回到顶部------转载
[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- js回到顶部 动画速度 （自己记录）
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- animate平滑回到顶部
Js: //回到顶部 $(".totop").click(function () { $("body,html").animate({scrollTop: 0} ...
随机推荐
- 整合Spring.net到asp.net网站开发中初探
整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说 Spring提供了一个轻量级的用于构建企业级 ...
- 【转】引入android项目在eclipse ADT中显示中文乱码问题
(1)修改工作空间的编码方式:Window->Preferences->General->Workspace->Text file Encoding在Others里选择需要的编 ...
- 关于GitHub账号及文章选题
课程:软件测试基础 姓名:胡东妮 学号:2014218028 github账号:hudongni1 文章选题:测试用例的自动生成 邮箱:dongnihu@tju.edu.cn
- get the execution time of a sql statement.
declare @d datetimeset @d = GETDATE()select * from dbo.spt_valuesselect [语句执行花费时间(毫秒)]= DATEDIFF(ms, ...
- 使用 http://httpbin.org/ 验证代理地址
发现一个很方便的工具,在Linux 下使用 curl http://httpbin.org/ 可以返回当前使用的一些网络信息
- break的使用例一
/* Name:break的使用例一 Copyright: By.不懂网络 Author: Yangbin Date:2014年2月21日 02:28:24 Description:本程序代码无如何含 ...
- ICT测试原理
在线测试,ICT,In-Circuit Test,是通过对在线元器件的电性能及电气连接进行测试来检查生产制造缺陷及元器件不良的一种标准测试手段.它主要检查在线的单个元器件以及各电路网络的开.短路情况, ...
- 解决：eclipse导入android时工程下没有R文件的问题，以及style.xml文件报错
解决:eclipse导入android时工程下没有R文件的问题,以及style.xml文件报错
- Struts 和Spring的核心控制器
Struts 核心控制器是FilterDispatch Spring核心控制器是DispatchServlet
- java的抽象类
现实世界中,人们表征世界时,会把现实世界中的很多类具有相同特征的事物归为一个抽象类.比如水果是许多植物果实的总称,我们可以定义一个苹果类.定义一个西瓜类,可以实例化一个苹果对象,可以实例化一个西瓜对象 ...