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,则返回顶部时不会有动画效果.
具体的效果,可以看我的页面右侧。
万水千山总是情,给个打赏行不行。
打赏

下面的js和上面嵌入的是一个吗
亲,可不可以说 这个主题和现在那个返回顶部不适合。。
个人觉得这样贴在主体边的top要主体和背景有所区分才有感觉。。因为它无论屏幕尺寸都是贴在主体旁,当主体背景色无区分就感觉和放在右边边一样的。。。
JS文件你可以在head标签之前引用,不过我喜欢放在网页底部。
调用的代码你放在footer等一直在的地方都可以。