movever/gist:7446482

## gistfile1.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" />
<style type="text/css">
	.wrap{width:500px;position:relative;margin:0 auto;height:2000px;background:green;}
	.to-top-container{position:absolute;bottom:0px;right:-20px;}
	.to-top{position:fixed;bottom:20px;}
	.extend .to-top{margin-left:1px;}/*没有这一行  to-top不会随着wrap移动*/
	/*css3*/
	/*如果要支持css3动画，两者需要都含有动画，并且时间一致*/
	.wrap{-webkit-transition:width .5s ease-in;}
	.to-top{-webkit-transition:margin .5s ease-in;}
</style>
<title>fixed</title>
</head>

<body>
	<div id="wrap" class="wrap">
    	<button id="add">add</button>
        <button id="reduce">reduce</button>
    	<div class="to-top-container"><div class="to-top">up</div></div>
	</div>

    <script>
		reduce.onclick = function(){
			wrap.style.width = '500px';
			wrap.setAttribute('class', 'wrap');
		}
    	add.onclick = function(){
			wrap.style.width = '900px';
			wrap.setAttribute('class', 'wrap extend');
		}
    </script>
</body>
</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" />
	<style type="text/css">
	.wrap{width:500px;position:relative;margin:0 auto;height:2000px;background:green;}
	.to-top-container{position:absolute;bottom:0px;right:-20px;}
	.to-top{position:fixed;bottom:20px;}
	.extend .to-top{margin-left:1px;}/没有这一行 to-top不会随着wrap移动/
	/css3/
	/如果要支持css3动画，两者需要都含有动画，并且时间一致/
	.wrap{-webkit-transition:width .5s ease-in;}
	.to-top{-webkit-transition:margin .5s ease-in;}
	</style>
	<title>fixed</title>
	</head>

	<body>
	<div id="wrap" class="wrap">
	<button id="add">add</button>
	<button id="reduce">reduce</button>
	<div class="to-top-container"><div class="to-top">up</div></div>
	</div>

	<script>
	reduce.onclick = function(){
	wrap.style.width = '500px';
	wrap.setAttribute('class', 'wrap');
	}
	add.onclick = function(){
	wrap.style.width = '900px';
	wrap.setAttribute('class', 'wrap extend');
	}
	</script>
	</body>
	</html>