返回顶部与底部这种效果是大部分站长都会用到的一个效果,绝大部分返回顶部都是用JS或者jquery编写的,其实用纯CSS也可以实现哦,我们推崇能用CSS解决的就不用JS哦。
<div class="go"> <a title="返回顶部" class="top" href="#gotop">至顶</a> <a title="如果您有意见,请反馈给我们!" class="feedback" href="http://www.lanrenzhijia.com" target="_blank">反馈</a> <a title="返回底部" class="bottom" href="#gobottom">至底</a> </div>
.go{width:47px;height:106px;background-color:#FFF;position:fixed;_position:absolute;right:12px;bottom:25%;border-radius:5px;box-shadow:0 0 2px #6E6E6E} .go a{background:url(images/a.png) no-repeat;display:block;text-indent:999em;line-height:999px;width:37px;margin:5px;border:0;overflow:hidden;float:left} .go .top{background-position:0 -33px;height:22px} .go .feedback{background-position:0 -54px;height:32px} .go .bottom{background-position:0 -88px;height:22px} .go .top:hover{background-position:-38px -33px} .go .feedback:hover{background-position:-38px -54px} .go .bottom:hover{background-position:-38px -88px}