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

Ft 2014-04-09 PM 185℃ 2条

    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,则返回顶部时不会有动画效果.

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

非特殊说明,本博所有文章均为博主原创。

评论啦~



已有 2 条评论


  1. ZLun
    ZLun

    下面的js和上面嵌入的是一个吗

    亲,可不可以说 这个主题和现在那个返回顶部不适合。。
    个人觉得这样贴在主体边的top要主体和背景有所区分才有感觉。。因为它无论屏幕尺寸都是贴在主体旁,当主体背景色无区分就感觉和放在右边边一样的。。。

    回复 2014-02-03 14:06
    1. LaLaLa
      LaLaLa 博主

      JS文件你可以在head标签之前引用,不过我喜欢放在网页底部。

      调用的代码你放在footer等一直在的地方都可以。

      回复 2014-02-04 22:42