分享仿csdn滚动到顶部

一天要饭生活又开始啦 2013-05-14 05:41:15

    <!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" />

    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script type="text/javascript">

    var cW,cH;

	function scrolls() {

		cW = document.documentElement.clientWidth;

		cH = document.documentElement.clientHeight;		

		var _div = document.createElement('div');

		_div.className = 'divClass';

		_div.appendChild(document.createTextNode('UP'));

		_div.id = 'divId';

		_div.onclick = function() {

			//document.documentElement.scrollTop = '0';

			$(document.documentElement).animate({'scrollTop': '0'}, 100);

			document.getElementById('divId').style.display = 'none';

		}

		//_div.setAttribute('onclick', function() {

			//document.documentElement.scrollTop = '0';

			//document.getElementById('divId').style.display = 'none';

			

		//});

		document.body.appendChild(_div);

		document.getElementById('divId').style.left = (cW - 40) + 'px';

		document.getElementById('divId').style.top = (cH - 40) + 'px';

		

	}

	function shang() {

		if(document.documentElement.scrollTop > 10) {

			document.getElementById('divId').style.display = 'block';

		} else {

			document.getElementById('divId').style.display = 'none';

		}

	}

	function resizediv() {

		cW = document.documentElement.clientWidth;

		cH = document.documentElement.clientHeight;	

		var scrollLeft = document.documentElement.scrollLeft;

		var scrollTop = document.documentElement.scrollTop;

		document.getElementById('divId').style.left = (cW - 40 + scrollLeft) + 'px';

		document.getElementById('divId').style.top = (cH - 40 + scrollTop) + 'px';	

	}

	window.onload = function() {

		scrolls();

	}

	window.onresize = resizediv;

	window.onscroll = function() {

		shang();

		resizediv();

	}

    </script>

    <style type="text/css">

	body { margin:0; padding:0; }

	.divClass { width:40px; height:40px; background-color:black; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5; position:absolute; color:red; text-align:center; cursor:pointer; display:none; }

    </style>

    </head>

    <body>

    <div style='height:1000px;'></div>

    </body>

    </html>