弹性返回顶部JS代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是弹性返回顶部JS代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为弹性返回顶部JS代码，属于站长常用代码" />
<title>弹性返回顶部JS代码</title>
<script type=text/javascript src="js/scrolltop.js"></script>
<link rel=stylesheet type=text/css href="css/lrtk.css">
</head>
<body style="text-align:center">
<div style="DISPLAY: none" id=goTopBtn><img border=0 src="images/lanren_top.jpg"></div>
<script type=text/javascript>goTopEx();</script>
<br /><br /><br /><br /><br /><br /><br />
<p>超出首屏范围，即会出现TOP按钮，否则自动隐藏。<br />
&nbsp;</p>
<p></p>
</body>
</html>

JS代码(scrolltop.js):

// JavaScript Documentfunction goTopEx(){
	var obj=document.getElementById("goTopBtn");
	function getScrollTop(){
	return document.documentElement.scrollTop;
}
function setScrollTop(value){
	document.documentElement.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);
}
}
}

CSS代码(lrtk.css):

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}

附件:下载该文件资源,减少时间成本(增值服务)