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

最新推荐文章于 2021-08-05 18:35:10 发布

zhu_wolf

最新推荐文章于 2021-08-05 18:35:10 发布

阅读量390

点赞数

分类专栏：其他文章标签： js 返回 mootools Mootools MooTools 返回顶部

其他专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript实现页面滚动到顶部的交互式功能，包括样式设置、事件监听以及平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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