js返回页面顶部特效

精选转载

284610120 2013-04-28 15:03:03

http://www.zhangxinxu.com/study/201104/back-to-top-mootools.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=utf-8" />
	<meta http-equiv="description" content="MooTools下的返回顶部功能的实现 » 张鑫旭-鑫空间-鑫生活" />
	<meta name="description" content="张鑫旭web前端学习实例页面" />
	<meta name="keywords" content="张鑫旭, 张鑫旭-鑫空间-鑫生活, web前端, css, MooTools, javascript, demo页面" />
	<meta name="author" content="张鑫旭, zhangxixnu" />
	<title>MooTools下的返回顶部功能的实现 » 张鑫旭-鑫空间-鑫生活</title>
	<link rel="stylesheet" href="../css/demo.css" type="text/css" />
	<link rel="stylesheet" href="../css/hl.css" type="text/css" />
	<style>
	.backToTop{display:none; width:18px; line-height:1.2; padding:5px 0; background-color:#000; color:#fff; font-size:12px; text-align:center; position:fixed; _position:absolute; right:10px; bottom:100px; _bottom:"auto"; cursor:pointer; opacity:.6; filter:Alpha(opacity=60);}
	</style>
	</head>

	<body>
	<div id="header">
	<a href="http://www.zhangxinxu.com/" class="logo" title="回到鑫空间-鑫生活首页">
	<img src="http://www.zhangxinxu.com/php/p_w_picpath/zxx_home_logo.png" border="0" />
	</a>
	</div>
	<div id="main">
	<h1>MooTools下的返回顶部功能的实现实例页面</h1>
	<div id="body" class="light">
	<div id="content" class="show">
	<h3>展示</h3>
	<div class="article_new"><a href="http://www.zhangxinxu.com/wordpress/?p=1576">回到相关文章 »</a></div>
	<div class="demo">
	<img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/study/s/s512/mm11.jpg" />
	</div>
	<h3>代码</h3>
	<h5>CSS代码：</h5>
	<pre name="code" class="css">
	.backToTop {
	display: none;
	width: 18px;
	line-height: 1.2;
	padding: 5px 0;
	background-color: #000;
	color: #fff;
	font-size: 12px;
	text-align: center;
	position: fixed;
	_position: absolute;
	right: 10px;
	bottom: 100px;
	_bottom: "auto";
	cursor: pointer;
	opacity: .6;
	filter: Alpha(opacity=60);
	}
	</pre>
	<h5>JS代码：</h5>
	<pre name="code" class="js">
	(function() {
	var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", {
	"class": "backToTop",
	title: $backToTopTxt
	}).set("text", $backToTopTxt).addEvent("click", function() {
	var st = document.getScroll().y, speed = st / 6;
	var funScroll = function() {
	st -= speed;
	if (st <= 0) { st = 0; }
	window.scrollTo(0, st);
	if (st > 0) { setTimeout(funScroll, 20); }
	};
	funScroll();
	}).inject(document.body), $backToTopFun = function() {
	var st = document.getScroll().y, winh = window.getSize().y;
	(st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");
	//IE6下的定位
	if (!window.XMLHttpRequest) {
	$backToTopEle.setStyle("top", st + winh - 166);
	}
	};
	window.addEvents({
	scroll: $backToTopFun,
	domready: $backToTopFun
	});
	})();
	</pre>
	</div>
	</div>
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
	<script>
	(function() {
	var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", {
	"class": "backToTop",
	title: $backToTopTxt
	}).set("text", $backToTopTxt).addEvent("click", function() {
	var st = document.getScroll().y, speed = st / 6;
	var funScroll = function() {
	st -= speed;
	if (st <= 0) { st = 0; }
	window.scrollTo(0, st);
	if (st > 0) { setTimeout(funScroll, 20); }
	};
	funScroll();
	}).inject(document.body), $backToTopFun = function() {
	var st = document.getScroll().y, winh = window.getSize().y;
	(st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");
	//IE6下的定位
	if (!window.XMLHttpRequest) {
	$backToTopEle.setStyle("top", st + winh - 166);
	}
	};
	window.addEvents({
	scroll: $backToTopFun,
	domready: $backToTopFun
	});
	})();
	</script>
	<script type="text/javascript" src="../js/hl_all.js"></script>
	<script type="text/javascript">
	DlHighlight.HELPERS.highlightByName("code", "pre");//<pre>标签添加属性name="code"以及class="LANG" (LANG可以是"js", "css", "xml" and "html")
	</script>
	<div id="footer">
	Designed & Powerd by <a href="http://www.zhangxinxu.com/">zhangxinxu</a><br />
	Copyright© 张鑫旭-鑫空间-鑫生活<br>
	<a href="http://www.miibeian.gov.cn/" target="_blank">鄂ICP备09015569号</a>
	</div>
	<div id="ad">
	<script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "2041257798";google_ad_width = 468;google_ad_height = 60;</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
	<script type="text/javascript">
	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-11205167-1']);
	_gaq.push(['_trackPageview']);

	(function() {
	var ga = document.createElement('script');
	ga.type = 'text/javascript';
	ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
	</script>
	</div>
	</body>
	</html>