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} ...
随机推荐
- NSJSONSerialization（category）的一个扩展类
.h文件 // // NSJSONSerialization+Manage.h // SVPullToRefreshDemo // // Created by Fuer on 14-7-4. // C ...
- AngularJs（一） MVC 模式的应用
Model的应用 MVC的模式大家都是十分熟悉了,那么Angular是怎么规划的呢.数据被放在json文件中,通过Ajax获取数据. [{ "action": "Buy ...
- node中的get请求和post请求的不同操作【node学习第五篇】
获取get的请求内容 /** * Created by Administrator on 2016/8/5. */ var http = require("http"); var ...
- c# json处理（转）
一.C#处理简单json数据 json数据:{"result":"0","res_info":"ok","qu ...
- php fpm start.sh
#! /bin/bash #Source function library. . /etc/init.d/functions #Check that networking is up. . /etc/ ...
- thinkPHP的常用配置项
'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...
- latex如何把目录页的页码去掉？
页眉的显示与关闭,清空,还有样式之间的切换,需要用到如下几个命令: \pagestyle 用于设置当前页以及后续页面的页眉显示情况(可称为页版式).中间页版式可由\thispagestyle命令来指 ...
- 一个失败的操作系统MULTICS
Unix的诞生和Multics(Multiplexed Information and Computing System)是有一定渊源的.当时开发者Brian Kernighan开玩笑地戏称这个不完善 ...
- 射频识别技术漫谈(29)——射频接口芯片TRF7960
TRF7960系列是TI推出的载波为13.56MHz.支持ISO15693.ISO14443A/B和FeliCa协议的射频接口芯片.许多人更关心它能不能读写MF1卡片,就我的理解及实际验证,由于MF1 ...
- WM_SYSCOMMAND包括很多功能，比如：拖动左边框、拖动标题栏、滚动条滚动、点击最小化、双击标题栏——Delphi 通过事件代替了大部分常用的消息，所以Delphi 简单、易用、高效
procedure TForm1.WMSysCommand(var Message: TWMSysCommand); var str: string; begin case Message.CmdTy ...