仿新浪微博返回顶部的js实现(jQuery/MooTools)

这篇文章发布于 2011年04月7日,星期四,18:27,归类于 JS实例。 阅读 110204 次, 今日 6 次 24 条评论

 

一、引言

在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。例如:
各网站返回顶部功能 张鑫旭-鑫空间-鑫生活
各网站返回顶部功能 张鑫旭-鑫空间-鑫生活
各网站返回顶部功能截图 张鑫旭-鑫空间-鑫生活

其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮;人人网的返回顶部直接在底部的工具条上;新浪微博的返回顶部在滚动高度大于0的时候显示,且返回顶部的效果是平滑动画效果。本文的实现就是类似于新浪微博的这种效果。//zxx:新浪微博今天启用新域名weibo.com了

二、jQuery下的返回顶部功能

您可以狠狠地点击这里:jQuery下的返回顶部demo

可以看到,如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条,如下图所示:
demo页面效果截图 张鑫旭-鑫空间-鑫生活

点击这里“返回顶部”字样的按钮后,页面就像是抹了润滑剂一样,倏地一声就滑到顶部了,同时,该点击按钮也玩起了躲猫猫 – 不见了。

实现的原理嘛,恩……估计鲜有人关心,所以我也懒得浪费口水了,直接上代码。

无论是这里的jQuery实现还是MooTools实现,下面的CSS代码都是一致的,如下:

.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}

js相关代码如下:

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();    
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);    
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();

寥寥十几行代码就实现了全部的交互细节了。您可以将上面代码直接拷贝到您的JavaScript文件中,页面就有效果啦!对了,请使用jQuery 1.4+。

三、MooTools下返回顶部功能实现

您可以狠狠地点击这里:MooTools下的返回顶部demo

demo页面的效果与上面jQuery demo下效果基本一致。

代码部分。CSS代码完全同上。JS代码如下:

(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = new Element("div", {
        "class": "backToTop",
        title: $backToTopTxt    
    }).set("text", $backToTopTxt).addEvent("click", function() {
        var st = document.getScroll().y, speed = st / 6;
        var funScroll = function() {
            st -= speed;
            if (st <= 0) { st = 0; }
            window.scrollTo(0, st);
            if (st > 0) { setTimeout(funScroll, 20); }
        };
        funScroll();
    }).inject(document.body), $backToTopFun = function() {
        var st = document.getScroll().y, winh = window.getSize().y;
        (st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");    
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.setStyle("top", st + winh - 166);    
        }
    };
    window.addEvents({
        scroll: $backToTopFun,
        domready: $backToTopFun
    });
})();

直接拷贝上面的代码在您的JS代码中就轻松实现效果啦。

MooTools的动画方法Fx不支持滚动,要实现滚动条的平滑滚动效果需要使用Fx.Scroll插件。但是,显然, 这里的简单功能没有必要再使用额外的插件,所以直接设置了个定时器实现了平滑滚动效果。

注:demo页面中的美女图片作用是撑开页面高度使产生滚动条。

四、结语

其实实现页面返回顶部效果最简单的就是a标签然后href属性值直接就是#锚点就ok了。但是这种方法会在url地址后面产生一个”#”。关于锚点相关的内容您可以参见我之前的“关于锚点跳转及jQuery下相关操作与插件”一文。

本文算是个实用小技术,内容不多,希望能对您的学习有所帮助。感谢阅读。

(本篇完)

分享到:


发表评论(目前24 条评论)

  1. 爱的世界说道:

    demo页的图片可以哦,色

  2. 莹莹yy说道:

    为什么$(window).animate({scrollTop:”1000″}),没效果呢

  3. hello world说道:

    不兼容ie

  4. 路过说道:

    你好我想请问一下
    var $backToTopTxt = “返回顶部”, $backToTopEle = $(”).appendTo($(“body”))
    .text($backToTopTxt).attr(“title”, $backToTopTxt).click(function() {
    $(“html, body”).animate({ scrollTop: 0 }, 120);
    })
    这样写的原因是什么,为什么不能在body中直接写入

  5. 路人说道:

    旭哥,我想问下,为什么有些JQ和script一定要插到body才会起作用,假如插入到head貌似就不会起作用,这个返回顶部就是一个例子,我搜索了一下你的文章,好像没有讲到哦,求大神解答

  6. 哈哈哥说道:

    牛X啊,哈哈

  7. web前端之家说道:

    收藏,必须的~

  8. Alex说道:

    在IE6下,“返回顶部”按钮会在滚动时上下跳

  9. 唐山自闭症说道:

    嗯,挺好,我用上了。

  10. KanCBA说道:

    谢谢您的分享,学习了,感谢。

  11. cyin15288说道:

    哥们,为什么复制下来做成的网页没有这个效果?

  12. Andrew说道:

    如果不考虑animation的话,scrollIntoView就可以了 所有浏览器都支持

  13. 说道:

    $(window).scroll(function() {
    $(window).scrollTop() == “0” ? $(“.gotop”).fadeOut(“slow”) : $(“.gotop”).fadeIn(“slow”)
    });
    这样还可淡入淡出,是否更简洁呢?

  14. sunhaixun说道:

    $backToTopEle.css(“top”, st + winh – 166);
    减掉的166是什么?求解

  15. midychen说道:

    ie 出现晃动现象,效果不理想

  16. Man说道:

    不错。

    从oschina进来的。滚动页面好卡。

    博主能结合一下这个地址的http://www.maxzu.com/archives/356.html效果仿一个?效果酷。再加上滚动下来才显示就更酷。求代码。

  17. MoLice说道:

    CSS里倒数第四行_bottom:”auto”有什么作用吗?浏览器识别不出来的加了双引号

  18. darasion说道:

    jQuery的,在Opera上边会有异常奇异的表现。 吧 120 改成 12000 可以看到增强的奇异效果。

    用 Opera 时把 $(“html, body”) 改成 $(‘html’) 就好了。

  19. 康康说道:

    也是,闭包额

  20. wordgold说道:

    博主这样写的话在ie6下会引起崩溃,ie6有时候会出现不允许页面加载完成前js修改dom的情况,建议全部包含在$(function(){})中