JS实现页面回到顶部效果
【代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>home</title>
</head>
<style>
*{
padding:0;
margin:0;
}
.box{
width:1190px; /*只有设置了宽度才能设置居中效果*/
margin:0 auto; /*设置居中*/
}
#btn{
display: none; /*按钮默认不显示*/
width:40px;
height:40px;
position:fixed; /*设置为固定定位*/
left:50%;
margin-left:610px;
bottom: 30px;
background:url("btn.png") no-repeat 0 0; /*通过sprite来设置背景*/
}
#btn:hover{
background:url("btn.png") no-repeat 0 -39px;
}
</style>
<body>
<div class="box">
<img src="img1.jpg" alt="">
</div>
<a id="btn" href="javascript:;"></a>
</body> <script>
// 当页面加载完成后执行
window.onload = function(){
var obtn = document.getElementById("btn");
var clientHeight = document.documentElement.clientHeight; //获取用户页面可视窗口的高度
var timer = null;
var isTop = true; //滚动条滚动时触发
window.onscroll = function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条当前位置距离顶部的距离 if(osTop >= clientHeight){ //当页面进入第二屏时显示按钮
obtn.style.display = "block";
}else{
obtn.style.display = "none";
} if(!isTop){ //若滚动条未到达顶部则继续执行定时器
clearInterval(timer);
}
isTop = false;
} obtn.onclick = function(){
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor(-osTop/6); //使向上滚动呈现渐变效果
document.documentElement.scrollTop = document.body.scrollTop = (osTop+ispeed);
isTop = true; if(soTop == 0){ //如果滚动条已经到达浏览器顶部则暂定滚动
clearInterval(timer);
}
},30)
}
}
</script>
</html>
JS实现页面回到顶部效果的更多相关文章
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现"跳到底部"，"回到顶部"效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery写toTop(回到顶部)效果
在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...
- 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- JS原生回到顶部效果
// 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...
随机推荐
- unity label和图片 gui
#pragma strict var str:String; //接收外部复制贴图 var imageTexture:Texture; private var imageWidth:int; priv ...
- TYVJ P1013 找啊找啊找GF Label：动态规划
做题记录:2016-08-15 22:19:04 背景 MM七夕模拟赛 描述 "找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手,你是我的好GF.再见.""诶,别再见啊.. ...
- OI优化开关
#pragma comment(linker,"/STACK:10240000,10240000")#pragma GCC optimize ("O2")
- <html:option获取文本值
<p class="w120">变更后IP:</p> <div class="comBobox w200 f_l"> < ...
- hdu
这道题因为某些位置要重复走,所以不能用标记的方法,但是为了提高效率,可以采用time[]数组和step[]数组来剪枝,很容易想到,当你从一条路劲走到(x,y)处的时间和步骤 比从另一条路劲走到(x,y ...
- Html - 404页面
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- hudson安装
Hudson 只是一个持续集成服务器(持续集成工具),要想搭建一套完整的持续集成管理平台, SVN.Maven.Sonar 等工具按需求整合则可. 1. 安装 JDK 并配置环境变量(略) J ...
- 配置Log4j(很详细)
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- MySQL5.7安装过程以及参数和设置说明
最近在讲MySQL课程,为了省事就在用MySQL5.5版本.因为win10不论32还是64都可以运行MySQL32位.可有很多使用者了解MySQL官网之后,去下载最新版的MySQL来使用,这点我不反对 ...
- OpenCV学习笔记——多种Smooth平滑处理
opencv库提供了好几种模糊平滑Smooth操作的类型作为cvSmooth的参数传入,从而达到不同的平滑效果,另外复习了一下如何复制一份图像和重新调整图像大小. 调整图像大小目前是按照一下步骤进行: ...