给wordpress添加back-to-top按钮

看到别人的博客都有一个漂亮的“back to top”按钮，是不是觉得很好呢,下面的方法可以实现这个功能，而且操作很简单！

1)在你的footer页面中添加以下代码（html+javascript）



2）在你的css文件中添加以下代码

/*back to top*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -110px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(img/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}


3）上传背景图到你的wordpress主题的img文件加下（可右击另存为）

OK，大功告成，演示就看看我的博客左下角的样子吧，就是那样的，还不错吧！

2011-6-20 纠正：

上面html代码中，第28行“Back to Top”前面缺少

源代码中已经修改好，谢谢逍遥兄的测试.