回到页首 Go Top Button

对于较长的页面，非常有必要显示“回到页首”按钮，以帮助用户快速返回到页面的开头。

使用以下HTML代码，在页面底部显示“回到页首”图标：

	<div class="backToTopButton">
	<a href="#" title="返回页首"><img src="back_to_top_24.png" alt="TOP" /></a>
	</div>

view raw gistfile1.html hosted with ❤ by GitHub

使用以下CSS代码，让按钮浮动显示在固定位置--即使在页面滚动时也始终停留在可见范围内：

	/* Go Top Link */
	div.backToTopButton {
	font-family: Georgia;
	font-size: 12px;
	color: #000000;
	background-color: #ffffff;
	padding: 3px 10px 20px 10px;
	width:50px;
	text-align: center;
	border-width : thin thin thin thin;
	border-color : #999 #999 #999 #999;
	border-style : solid solid solid solid;
	border-collapse : collapse;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position: fixed;
	bottom: -20px;
	right: 20px;
	z-index: 200;
	}
	div.backToTopButton:hover {
	color: #ffffff;
	background-color: #999;
	/*cursor: pointer;*/
	/*cursor: hand;*/
	}

view raw gistfile1.css hosted with ❤ by GitHub

页面显示效果，如下图所示：

您也可以下载完整的示例文件。