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