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

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

Back to Top

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文件加下(可右击另存为)
给wordpress添加back-to-top按钮-魏星博客

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



2011-6-20 纠正:

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

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