先上效果图：
这是一个纯css写的返回顶部按钮组，来详细介绍下写法。
先上html代码，ps：此代码示例用到了字体图标显示图标（具体用法参考：http://demo.txcstx.cn/post/765.html）：
<div class="gotop">
<ul>
<li><a id="goTopBtn" href="#"><i class="icon iconfont"></i><em>返回顶部</em></a></li>
<li><a href="#" ><i class="icon iconfont"></i><em>上一文章</em></a></li>
<li><a href="#"><i class="icon iconfont"></i><em>下一文章</em></a></li>
<li><a target="_blank" href="#"><i class="icon iconfont"></i><em>官方客服</em></a></li>
<li><a href="#" class="user" target="_blank"><i class="icon iconfont"></i><em>个人中心</em></a></li>
</ul>
</div>
然后上css代码：
.gotop{
position: fixed;/* 固定 */
top:50%;/* 离左边50% */
left: 50%;/* 离顶部50% */
margin-left: 600px;/*计算页面的实际宽度除以2做一个负左边距 */
margin-top: -125px;/* 计算按钮组的实际高度除以2做一个负上边距*/
}
.gotop li a{display: block;width: 30px;height: 30px;border-bottom: 1px solid #000;background-color: #333;color: #fff;line-height: 15px;padding: 10px;text-align: center;}
.gotop li a.user{border: 0;}
.gotop li a i{line-height: 30px;font-size: 20px;}
.gotop li a em{display: none;}
.gotop li a:hover{background-color: #3398cc;color: #fff;}
.gotop li a:hover i{display: none;}
.gotop li a:hover em{display: block;font-style: normal;}
css主要是注释里面写的做了固定和边距，其他颜色什么的可以根据自己需求调整。