返回顶部 js

返回顶部：

1.可以在网页添加锚链接

2.利用js 可以实现动画效果

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gb2312">
	<title>goTop</title>
	<style type="text/css">
	* {margin:0;padding:0;}
	#goTop {position:fixed;right:20px;bottom:40px;width:40px;height:32px;padding:8px 0 0;background-color:#666;border-radius:6px;cursor:pointer;}
	#goTop:hover {background-color:#333;}
	#goTop:hover .gotop1 {border-left:12px solid #333;border-right:12px solid #333;}
	#goTop .gotop1 {width:0;margin:0 auto;border-bottom:12px solid #FFF;border-left:12px solid #666;border-right:12px solid #666;}
	#goTop .gotop2 {width:10px;height:10px;margin:0 auto;background-color:#FFF;}
	</style>
<!--[if IE 6]>
<style>
/*解决IE6下position:fixed;问题*/
#goTop{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||0)-(parseInt(this.currentStyle.marginBottom,0)||10)));/*使元素固定在浏览器的底部*/
}
</style>
<![endif]-->
</head>
<body>
	<div title="返回顶部" id="goTop" style="display:none;">
		<div class="gotop1"></div>
		<div class="gotop2"></div>
	</div>
	<div>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
	</div>
	<script type="text/javascript">
	    function $getId(Id) {
	        return document.getElementById(Id);
	    }	    
	    var goTop = $getId("goTop");

	    window.onscroll = function () {
	        if (document.documentElement.scrollTop + document.body.scrollTop > 0) {
	            goTop.style.display = "";
	        } else {
	            goTop.style.display = "none";
	        }
	    }
	    goTop.onclick = function () {
	        var Timer = setInterval(GoTop, 10);
	        function GoTop() {
	            if (document.documentElement.scrollTop + document.body.scrollTop < 1) {
	                clearInterval(Timer);
	            } else {
	                document.documentElement.scrollTop /= 1.1;
	                document.body.scrollTop /= 1.1;
	            }
	        }
	    }	
	</script>
</body>
</html>

关于onscroll：

scroll事件是在window对象上发生，但表示的是页面相应元素的变化，
在混杂模式下：可以通过<body>元素的scrollLeft/scrollTop监控这一变化，
在标准模式下大多浏览器通过<html>元素反应这一变化（safari仍基于body）

参考：蓝色理想：http://bbs.blueidea.com/thread-2979799-1-1.html

posted @ 2012-12-19 11:04  hdchangchang  阅读(189)  评论(0)  编辑  收藏  举报