您的位置：首页 > Web前端 > JavaScript

一个简单的弹性返回顶部JS代码实现介绍

2018-10-12 13:51 573 查看

昨天做了一个这样的功能，贴出来参考。
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、点击回到顶部，并且隐藏掉。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航