jQuery实现返回顶部功能

前端之家收集整理的这篇文章主要介绍了jQuery实现返回顶部功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

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


以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

猜你在找的jQuery相关文章