西门的后花园

一个热爱网络的年轻人的博客

缓冲版“返回顶部”

我写过两篇关于博客用户体验的文章(用户体验一用户体验二),其实我自己博客也有很多地方的用户体验不好,包括我自己都有点不耐烦了,就比如没有“返回顶部”这个功能,导致竞猜世界杯那个网页由于太长,只要回复了,想看其他文章,必须滚动滑轮很久。所以这个小功能是急需加上去的,以至于前天和昨天都在研究position:fixed定位。

说来丢人,因为IE6不支持这个属性,所以我找了好多资料来兼容IE6,但是最后都没有比较完美的方法。求助阿邙,他给了我个例子,但是那个例子我自己看着都有点不靠谱,而且网上也有朋友反应有BUG,所以干脆放弃IE6(你们居然还敢用IE6,就不怕滑轮滑死你的指头!)。

搞定定位后,就是找合适的代码来实现“返回顶部”这个功能了。最简单的就是直接做个超链接里面写个#,但是这样效果确实不太人性化,还好前几天阿邙在自己的博客推荐一款主题,里面就有介绍这个功能的文章《Page Scroll 的幾種方法》,当然,这么好的东西,我肯定是要借鉴过来的啦!

效果可以点文章末尾的:

返回顶部

和页面右下方的(非IE6):

返回顶部

点了这些效果是不是很友好很舒服呢?这就是用户体验啦!

下面来说怎么实现。

首先下载一段JavaScript代码,放到你的主题目录下面,代码很小,只有3.11KB,可以忽略不计了。下载请点我

里面有个例子,可以自己点点,效果还是很不错的,那是原作者写的例子,只需要里面的JS文件即可。

然后在主题目录里的header.php文件里找到


这是引用主题里面的CSS文件,或许你直接Ctrl+F找不到,但是找下面这段应该找得到,这是你主题的路径

bloginfo('template_url')

回车,加上代码


其实上面的意思就是在页面加上引用这段JS代码而已。然后在你想要的地方,加上特殊的文字或者图片,做个超链接,href里面写上“#跳转网页指定地的ID”。

我举我第一个例子“发表意见”,你就懂我说的意思了。

因为点“发表意见”是要跳到下面的评论框,所以找到页面HTML代码评论框那段,比如我博客是评论框代码是


这里的id=”comment”就是我们要找的东西啦,href里面改成“#comment”,意思就是跳到评论框这个id位置。

其实我的代码写得也很简单,在single.php合适的地方写上

发表意见

然后加div用CSS美化一下就OK,就是这么简单。如果你不会,先试着在空白网页里写个小例子试试。

下面的有小三角形的“返回顶部”,其实我是偷的Prower主题里面的代码,代码我也写出来,放到footer.php里面,不过那个小三角形我还是看不懂原理,哎,CSS支持匮乏啊!

HTML代码:




第1、3句,是判断非IE6用户,如果是IE6,不显示。第二句里面的“#header-title”,是我网页最上面标题的id。

CSS代码:

#go_top {position:fixed; bottom:5px; left:50%; margin-left:225px;}
#go_top a {width:12px; display:block; padding-top:2px;}
#go_top a:hover {background:#999; color:#fff;}
#go_top em {height:0; width:0; border-width:0 7px 7px; border-style:solid; border-color: #999 #fff; display:block; overflow:hidden;}

OK,两个小东西的代码都贴出来了,没什么技术含量,有技术含量的是那段JavaScript代码。“国外的富豪都是做网站,写软件的;中国的富豪都是盖房子,卖保险的。”这句话很有道理啊!

最近想自己写个主题,因为自己也能凑合的写个小说网站了,不过就是没有灵感,也在到处看博客,发现好的也都收藏起来了,然后把我喜欢的元素都拿过来,应该OK的。不过我人比较懒,不知道何年何月能搞定啊!

评论已关闭

分类目录