jQuery实现返回顶部功能详解编程语言

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

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8658.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论