给wordpress添加back-to-top按钮
看到别人的博客都有一个漂亮的“back to top”按钮，是不是觉得很好呢,下面的方法可以实现这个功能，而且操作很简单！
1)在你的footer页面中添加以下代码（html+javascript）
`
// 100) {
$(‘#back-top’).fadeIn();
} else {
$(‘#back-top’).fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
// ]]>
`
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”前面缺少``
源代码中已经修改好，谢谢逍遥兄的测试.
