对于较长的页面,非常有必要显示“回到页首”按钮,以帮助用户快速返回到页面的开头。
使用以下HTML代码,在页面底部显示“回到页首”图标:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="backToTopButton"> | |
<a href="#" title="返回页首"><img src="back_to_top_24.png" alt="TOP" /></a> | |
</div> |
使用以下CSS代码,让按钮浮动显示在固定位置--即使在页面滚动时也始终停留在可见范围内:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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;*/ | |
} |
页面显示效果,如下图所示:
您也可以下载完整的示例文件。