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} ...
随机推荐
- （转）探讨：ASP.NET技术的学习顺序问题
探讨:ASP.NET技术的学习顺序问题 摘要:很多人对于ASP.NET的入门和学习顺序比较迷茫,今天让我们一起来跟随作者的思路学习探讨ASP.NET的学习顺序问题,希望有所帮助. 如果你已经有较多的面 ...
- iOS 根据图片URL从本地相册获取图片
最近做一个聊天的项目,需要发送图片后读取本地图片显示到列表里.刚开始的时候,天真的认为可以用SDWebImage直接加载,然后并不能行. 于是在网上搜了搜,如何根据从相册获取的UIImagePicke ...
- B - 确定比赛名次
B - 确定比赛名次 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit S ...
- BZOJ 2245: [SDOI2011]工作安排( 费用流 )
费用流模板题..限制一下不同愤怒值的工作数就可以了. ------------------------------------------------------------------------- ...
- ROS使用rqt_console
打开一个新的终端在里面输入: sudo apt-get install ros-hydro-rqt ros-hydro-rqt-common-plugins ros-hydro-turtlesim 安 ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- java中文件保存、打开文件对话框
package com.soft.test; //AWT: FileDialog类 + FilenameFilter类 可以实现本功能 //Swing: JFileChooser类 + FileFil ...
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- Vue.js——webpack
Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...
- Delphi 重启应用程序（创建Bat文件的Process）
Delphi 重启应用程序在工程主文件中加入Delay(500); //启动程序时请延时一段时间,否则只能重启一次 procedure RestartApp; var BatchFile: TextF ...