回到网页顶部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代码，属于站长常用代码" />
<script language=JavaScript type=text/javascript src="js/jquery.js"></script>
<link rel=stylesheet type=text/css href="css/xixi.css">
<title>回到网页顶部JS代码</title>
</head>
<body style="text-align:center">

<div class=main>
	<div id=AdLayer><a href="#top"><img src="images/top.gif"></a></div>
</div>

<script language=JavaScript type=text/javascript src="js/lanrentuku.js"></script>


</body>
</html>

JS代码(lanrentuku.js):

/*浮动窗口*/
(function(){
	var n=0;
	var obj=document.getElementById("AdLayer");
	if(!obj){
	return false;
}
var x=0;
	var fe=$("#AdLayer");
	window.onscroll=function(){
	obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';
	x=(document.body.scrollTop||document.documentElement.scrollTop)+n;
	if(x==0){
	fe.fadeOut().hide()}
else{
	fe.fadeIn().show()}
;
}
;
	window.onresize=function(){
	obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px'}
;
}
)();
	/*懒人图库 www.lanrentuku.com */

CSS代码(xixi.css):

.main{position:relative;width:980px;height:4800px;background-color:#FC6;margin:0 auto;padding-top:220px}
#AdLayer{position:absolute;width:20px;display:none;height:59px;top:0px;right:-30px;}
img{border:0;}

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