给Typecho添加了一个“返回顶部”的按钮

0.9新版的Typecho默认首页显示的是5篇文章，我的文章一般来说都比较长，于是考虑添加一个“返回顶部”按钮，这样就可以直达页面顶部，倍儿爽了。网上的例子很多，我这里用的是jQuery+CSS来实现的。直接上代码。

首先，你需要引用两个JS脚本。

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/gotoTop.js"></script>

然后，你需要在CSS中设计你的返回顶部按钮样式，我这里仿制的新浪微博的样式。

<!-- 仿新浪返回顶部css -->
.backToTop {
	width:14px;
	background:#dff3fd url(top.gif) no-repeat 5px 0px;
	padding:20px 5px 5px 5px;
	line-height:1.5;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}
a.backToTop:hover {
	text-decoration:none;
	color:#f60
}

最后，在你的页面中调用goToTop，下面的代码放在<body>标签之前，我放在footer里面。

<script type="text/javascript">
$(function(){
	$(".backToTop").goToTop();
	$(window).bind('scroll resize',function(){
		$(".backToTop").goToTop();
	});
});
</script>

这里提一下的是，上述代码中，页面加载时调用一次goToTop()，当滚动页面或浏览器窗口大小发生变化时也调用goToTop()。在goToTop()里面，提供了几个主要的参数可配置，他们分别是：



    pageWidthJg：按钮和页面的间隔距离，默认为2.

    pageWidth：页面宽度，如960.

    pageHeightJg：按钮和页面底部的间隔距离，默认为100.

    duration：回到顶部的速度时间，默认为200，单位毫秒，如果设置为0，则返回顶部时不会有动画效果.

具体的效果，可以看我的页面右侧。