一个简单的弹性返回顶部JS代码实现介绍
更新时间:2013年06月09日 15:30:24 作者:
页面滚动条处于低端,点击回到顶部,并且隐藏掉,具体实现代码如下,感兴趣的朋友可以参考下哈
昨天做了一个这样的功能,贴出来参考。
HTML/JS/CSS代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹性返回顶部JS代码</title>
<script type="text/javascript">
function goTopEx() {
var obj = document.getElementById("goTopBtn");
function getScrollTop() {
return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value) {
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = value;
} else {
document.body.scrollTop = value;
}
}
window.onscroll = function() {
getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none";
}
obj.onclick = function() {
var goTop = setInterval(scrollMove, 10);
function scrollMove() {
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
}
}
</script>
<style>
BODY {
HEIGHT: 3600px;
}
#goTopBtn {
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto
}
</style>
</head>
<body style="text-align:center">
<div style="display: none" id="goTopBtn"><img border=0 src="/${res}/img/go_to_top.png"></div>
<script type=text/javascript>goTopEx();</script>
<br /><br /><br /><br /><br /><br /><br />
<p></p>
<p><p>超出首屏范围,即会出现TOP按钮,否则自动隐藏。<br />
</p></p>
<p></p>
</body>
</html>
效果图:
页面滚动条处于低端
1、
2、点击回到顶部,并且隐藏掉。
HTML/JS/CSS代码:
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹性返回顶部JS代码</title>
<script type="text/javascript">
function goTopEx() {
var obj = document.getElementById("goTopBtn");
function getScrollTop() {
return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value) {
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = value;
} else {
document.body.scrollTop = value;
}
}
window.onscroll = function() {
getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none";
}
obj.onclick = function() {
var goTop = setInterval(scrollMove, 10);
function scrollMove() {
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
}
}
</script>
<style>
BODY {
HEIGHT: 3600px;
}
#goTopBtn {
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto
}
</style>
</head>
<body style="text-align:center">
<div style="display: none" id="goTopBtn"><img border=0 src="/${res}/img/go_to_top.png"></div>
<script type=text/javascript>goTopEx();</script>
<br /><br /><br /><br /><br /><br /><br />
<p></p>
<p><p>超出首屏范围,即会出现TOP按钮,否则自动隐藏。<br />
</p></p>
<p></p>
</body>
</html>
效果图:
页面滚动条处于低端
1、
![](http://img.jbzj.com/file_images/article/201306/201306091525507.gif?201359152613)
2、点击回到顶部,并且隐藏掉。
![](http://img.jbzj.com/file_images/article/201306/201306091526478.gif?20135915270)
相关文章
如何解决attachEvent函数时,this指向被绑定的元素的问题?
如何解决attachEvent函数时,this指向被绑定的元素的问题?...2007-04-04基于casperjs和resemble.js实现一个像素对比服务详解
这篇文章主要给大家介绍了关于基于casperjs和resemble.js实现一个像素对比服务的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-01-01兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下2014-08-08浅谈javascript的url参数parse和build函数
下面小编就为大家带来一篇浅谈javascript的url参数parse和build函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-03-03ion content 滚动到底部会遮住一部分视图的快速解决方法
本文给大家带来了ion content 滚动到底部会遮住一部分视图的快速解决方法,其实解决方法超简单的,只要在你的controller里面预先注入$ionicScrollDelegate就可以了,感兴趣的朋友通过本文一起学习吧2016-09-09
最新评论