movever · December 28, 2015 04:59
diff --git a/gistfile1.html b/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>