返回顶部与底部这种效果是大部分站长都会用到的一个效果,绝大部分返回顶部都是用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}

