返回顶部浮动图标代码
本文最后更新于 4529 天前,其中的信息可能已经有所发展或是发生改变。

自打网站换了个主题以后,访问起来最痛苦的事情就是需要滚动条拖来拖去的。今天终于给加上一个返回顶部的浮动图标代码,顺带分享下,最近写作热情高涨,苦于没有时间。顺带上图片一张,截图留念这个版本的皮肤。

代码使用很简单,只需要将HTML代码,和jQuery代码放入到网页的尾部即可。另外你可能还需要和我一样盗用人人网的返回顶部图片一张。

HTML代码

<div style="display:none;" class="back-to" id="toolBackTop">
<a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top">
返回顶部</a>
</div>

jQuery代码

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    var bt = $('#toolBackTop');
    var sw = $(document.body)[0].clientWidth;

    var limitsw = (sw - 840) / 2 - 80;
    if (limitsw > 0){
        limitsw = parseInt(limitsw);
        bt.css("right",limitsw);
    }

    $(window).scroll(function() {
        var st = $(window).scrollTop();
        if(st > 30){
            bt.show();
        }else{
            bt.hide();
        }
    });
})
</script>

评论

  1. 路过
    12年前
    2011-10-25 0:19:59

    本来还想问图标在哪里,拉到评论就看到了。

  2. 12年前
    2011-10-25 11:39:41

    哈 盗用人人

  3. 宁静致远
    12年前
    2011-10-25 14:15:08

    谢谢分享

  4. kaka
    12年前
    2011-10-25 14:36:01

    实用,多谢分享~~~

    不知可否share一下这套简洁的膜板呢??

    还有,你的后台的文章管理的时候,在chrome下可以删除吗? 会报js错误吗?

    • 博主
      kaka
      12年前
      2011-10-25 15:21:14

      这个主题还有点没有修改完,修改完了可以放出来。

      删除文章,我刚测试,没有问题呀?

      • kaka
        Kimi
        12年前
        2011-10-26 23:06:04

        那可能是我mac下chrome版本(16.0.912.12 dev)的问题了。。

        另,期待你这简洁给力的主题~~~

        • 博主
          kaka
          12年前
          2011-10-27 9:32:34

          我是Lion,不过Chrome版本是14的

  5. 1991
    12年前
    2011-11-14 14:24:52

    有兼容问题阿、 在ie6下不能漂浮.

  6. 12年前
    2012-2-11 4:34:16

    图标很好看,请继续写完教程。。。。小弟眼拙,实在看出来到底怎么使用,代码都放进去了,图片怎么调用?没效果啊哥们

    • 博主
      设计梦
      12年前
      2012-2-11 16:40:57

      你用firefox的firebug,看本站的css和网络就知道为啥图片没显示了。

      • 设计梦
        Kimi
        12年前
        2012-2-14 22:15:25

        啊~~博主,我的意思是只有代码,没有CSS代码。。不知道怎么固定图片之类的,我尝试把返回顶部那几个字换成图片调用代码,没成功啊,真的很想学习,谢谢你

      • 设计梦
        Kimi
        12年前
        2012-2-14 22:16:23

        说错了,不是CSS代码,你给的代码里有CSS属性了,但是还是没法调用出图片 额

        • 博主
          设计梦
          12年前
          2012-2-14 22:18:17

          这个,这个怎么解释呢,用firebug这个firefox插件,你就能看出来为啥不显示图片了。我如何教你呢~~~

          • 设计梦
            Kimi
            12年前
            2012-2-14 22:28:32

            .back-to .back-top {
            background: url(“images/back-top.png”) no-repeat scroll 0 0 transparent;
            display: block;
            float: right;
            height: 50px;
            margin-left: 10px;
            outline: 0 none;
            text-indent: -9999em;
            width: 50px;

            噢,你是不是没写出CSS代码。。那我自己复制到CSS里面,然后HTML. JS代码全部放入FOOT.PHP,就可以了不?

          • 博主
            设计梦
            12年前
            2012-2-14 23:41:37

            是的

  7. 12年前
    2012-2-11 5:24:17

    不成功啊。。。博主。。。SOS

  8. 12年前
    2012-3-15 22:08:23

    没找到图片啊

    • 博主
      前端开发
      12年前
      2012-3-16 9:35:21

      图片是放在样式中的,你查看本站样式文件即可找到~

  9. 3055
    12年前
    2012-4-14 23:42:09

    博主:在专业上的事需要向您请教请教,能给个Q吗?谢谢

  10. 12年前
    2012-4-25 13:49:04

    博主:你好
    我在我的网站上使用了你的这个代码,这个代码使用正常,但是网站上别的功能(switchTab)受到了影响,请问有什么好的解决办法吗?

  11. kinglan
    12年前
    2012-5-23 15:57:02

    ie6不生效的,博主出个兼容各个浏览器的方案吧

  12. About
    12年前
    2012-7-28 7:33:29

    博主,您好,您的这个教程的方法很好,也很美观.但是我有些问题想请教您,谢谢了.我按照您的方法添加代码到源文件里的时候并没有生效.不知道是不是我方法不对.
    我的是WordPress驱动,
    我将以下代码添加到footer.php文件中
    =============================

    返VDE;顶部

    ript type=”text/javascript”>
    $(document).ready(function () {
    var bt = $(‘#toolBackTop’);
    var sw = $(document.body)[0].clientWidth;

    var limitsw = (sw – 840) / 2 – 80;
    if (limitsw > 0){
    limitsw = parseInt(limitsw);
    bt.css(“right”,limitsw);
    }

    $(window).scroll(function() {
    var st = $(window).scrollTop();
    if(st > 30){
    bt.show();
    }else{
    bt.hide();
    }
    });
    })
    ript>

    ==================================

    将以下代码添加到style.css文件中

    ====================================
    .back-to {
    bottom: 35px;
    overflow: hidden;
    position: fixed;
    right: 10px;
    width: 110px;
    z-index: 999;
    }
    .back-to .back-top {
    background: url(“images/back-top.png”) no-repeat scroll 0 0 transparent;
    display: block;
    float: right;
    height: 50px;
    margin-left: 10px;
    outline: 0 none;
    text-indent: -9999em;
    width: 50px;
    }
    .back-to .back-top:hover {
    background-position: -50px 0
    }

    ===========================

    这么做并没有效果,图片也拷到相应目录了.请教您,问题出在哪呢?谢谢了.

  13. kkk
    11年前
    2012-11-02 10:16:34

    不行是因为样式里有一个@import url( http://www.ccvita.com/usr/themes/ccvita/css/960.gs.css );,真怀疑楼主是抄袭的

  14. kkk
    11年前
    2012-11-02 10:26:52

    楼上的各位注意了
    完整的css代码是
    A {
    COLOR: #3354aa; TEXT-DECORATION: none;BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OUTLINE-style: none; OUTLINE-COLOR: invert; PADDING-LEFT: 0px; OUTLINE-WIDTH: 0px; PADDING-RIGHT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; FONT-SIZE: 100%; VERTICAL-ALIGN: baseline; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px
    }
    A:hover {
    BORDER-BOTTOM: medium none; COLOR: #444
    }
    .back-to {
    Z-INDEX: 999; POSITION: fixed; WIDTH: 110px; BOTTOM: 35px; OVERFLOW: hidden; RIGHT: 10px
    }
    .back-to .back-top {
    TEXT-INDENT: -9999em; OUTLINE-st
    yle: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: 0px; WIDTH: 50px; DISPLAY: block; BACKGROUND: url(http://www.ccvita.com/usr/themes/ccvita/images/back-top.png) no-repeat 0px 0px; FLOAT: right; HEIGHT: 50px; MARGIN-LEFT: 10px
    }
    .back-to .back-top:hover {
    BACKGROUND-POSITION: -50px 0px
    }

    楼主告诉我们的css样式是不行的,因为他的css样式里还外链了一个 http://www.ccvita.com/usr/themes/ccvita/css/960.gs.css,这是我在调试他的样式里发现的

  15. Rube
    11年前
    2013-8-24 21:21:09

    博主如此强大,,,求给Q 啊!!

  16. H
    10年前
    2013-11-25 16:56:30

    很喜欢你这个代码高亮 能分享下吗

  17. 10年前
    2014-1-21 9:58:07

    使用了jquery,不喜欢,喜欢纯粹一点的

  18. 蔡春敏
    10年前
    2014-6-26 11:11:12

    我用的是谷歌博客,在网上找了一段代码,可是不管有没有滚动页面图片总是出现在右下方,不像回到顶部时就隐藏。能告诉我是原因吗?

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇