MooTools下的返回顶部功能的实现实例页面

来源:互联网 发布:js获取被选中的option 编辑:程序博客网 时间:2024/05/01 10:46
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    });})();
原创粉丝点击