西门的后花园

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

缓冲版“返回顶部”

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

评论列表

  1. 缓冲了是不错 不过3K的js啊 可以实现更多其他效果了

  2. 这个功能我一般不会用到,即使是在别人的博客里面!

  3. 我是用jquery来代替position:fixed的,IE6真杯具呀

  4. 我也要折腾这个了

  5. 中间的缝隙那么小你也能插个东西进去。。。佩服,佩服

  6. 中间的缝隙那么小你也能插个东西进去。。。佩服,佩服啊

  7. ❓ 我也要给我加一个了.

  8. 评论这个应该也是褒贬不一吧,有时候看众家评论也是一种乐趣,不想一下就到地了,和传送差不多了

  9. 我那个博客好像有了 😛

  10. 🙄 jQuery森林群里看到西门了~~~

  11. 插的位置挺好的

  12. 好插件 不过太多了 小托看不下去 嘿嘿 🙄

  13. 现在你越来越厉害了,呵呵..

  14. 抛弃IE6吧。。

  15. 暂时不弄了,我觉得我的站加载速度已经很慢了 ➡

  16. 很不错的改进,赞一个!

  17. 。。。。。代码居然无法显示 ➡ ➡
    /* 返回顶部 */

  18. 什么意思!!无法显示

  19. 全网页的锚点通杀????这样评论分页就死掉了…. 😮

    用ID控制吧….

    • 锚点和ID不矛盾的呀,而且一个ID对应一个锚点,正常呀。

      • kana

        noooooo… 🙁

        我的意思是….你的这段JS….是针对全网页的锚点…
        评论分页的部分会失效(除非你把分页也改AJAX)~

        我说的ID控制是…你在JS里可以只指定几个需要用到滑动效果的锚点

  20. kana

    name是一个逐渐被淘汰的属性(在HTML5里已经完全被淘汰),并且即使在html4里ID的命名属性优先权还是高於name你可以不加任何JS试试写一个 abcde 这时href=#top_1 便会失效,因为两者同为锚点原理,那浏览器将会判断何者的命名属性为优先而做动作。作者这里一样用的是锚点原理,没有用到name只是因为他是被淘汰的属性。

    • kana

      name是一个逐渐被淘汰的属性(在HTML5里已经完全被淘汰),并且即使在html4里ID的命名属性优先权还是高於name你可以不加任何JS试试写一个 <div id="top_1" name="top_1">abcde<div> 这时href=#top_1 便会失效,因为两者同为锚点原理,那浏览器将会判断何者的命名属性为优先而做动作。作者这里一样用的是锚点原理,没有用到name只是因为他是被淘汰的属性。

  21. kana

    哦哦…我晕掉了原谅我

    应该是这样讲~

    <a name="top_1" id="top_2">123456</a>

    不管用href=”#top_1″ 还是href=”#top_2″都可以链接的到…但以优先权来讲ID是在前面(因为它具有全网页独一性)。
    而两者都是同为锚点原理,但name属性正逐渐被淘汰~并且以锚点来讲,只被限制在a的元素里做使用。

    所以作者这里用的是ID而非name

    (我的天我前面一篇在讲什麽太丢人 😕 )

    • 好吧,我搞错了,那你之前说的“你的这段JS….是针对全网页的锚点…”即使全站锚点,我指定的ID肯定是整站唯一的呀,比如#comment,#header-title。既然他们是ID,当然就是唯一的,这和评论分页里面的什么东西有什么冲突,我糊涂了 😕 还有,你忘记填写你的博客地址了。

  22. 是的,ID具有独一性,但这段JS作者是针对整个网页的锚点,也就是你只要是href=”#xxx”的链结都会受到影响。

    也正因为ID有独一性,我才会说,你可以在JS里将几个会用到的锚点EX:#header-title、#header-title抓出来单独设定他的滑动,然後在html里用ID做对应。

    这样其他的href=”#xxx”就不会受到影响

  23. 确实,你这个返回顶部的代码效果很好,不用自动隐藏,我要找的就是这种代码,然后添加超链接之后方到我的网站去。

  24. 已经收下了,现在我的网站越来越像你这儿了哦,哈哈~~ ❗

  25. 这篇文章刚还使用上 转了哈==

万戈进行回复 取消回复

分类目录