js 返回顶部实现代码

来源:luqidong 发布时间:2014-02-23 20:39:02 点击数:

  首先我们来讲一下原理,所谓的返回顶部就是点击返回顶部之后跳转到页面的顶部,在滚动条距离顶部一定高度的时候就设置返回顶部的元素display为none。那么我们就来看下scrollTop:

78OA办公系统

我们就设置当scrollTop大雨200的时候元素就显示出来:

78OA办公系统

当然这里还有一些css的设置,就是设置返回顶部的元素的定位问题,我们用fixd来固定它在网页中的位置。

算法就是 document.body.scrollTop>200?the Element show:the Element hidden。

下面是代码:

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

 

本文由免费oa系统78oa原创,转载请注明出处。