loading...

返回顶部浮动图标代码

发布时间:October 24, 2011 分类:JavaScript

网站迁移说明

Memcached的LRU算法

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

代码使用很简单,只需要将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>

Tags: css, JavaScript, jquery


已有 28 条评论 »

  1. 路过 路过

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

  2. jeffstric jeffstric

    哈 盗用人人

  3. 宁静致远 宁静致远

    谢谢分享

  4. kaka kaka

    实用,多谢分享~~~

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

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

    1. kimi kimi

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

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

      1. kaka kaka

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

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

        1. kimi kimi

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

  5. 1991 1991

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

  6. 设计梦 设计梦

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

    1. kimi kimi

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

      1. 设计梦 设计梦

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

      2. 设计梦 设计梦

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

        1. kimi kimi

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

          1. 设计梦 设计梦

            .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,就可以了不?

  7. 设计梦 设计梦

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

  8. 前端开发 前端开发

    没找到图片啊

    1. kimi kimi

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

  9. 3055 3055

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

  10. wendell wendell

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

  11. kinglan kinglan

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

  12. About About

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

    返VDE;顶部


    $(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();
    }
    });
    })

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

    将以下代码添加到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 kkk

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

  14. kkk kkk

    楼上的各位注意了
    完整的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-style: 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 Rube

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

  16. H H

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

  17. DH DH

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

  18. 蔡春敏 蔡春敏

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

添加新评论 »

captcha
请输入验证码