支付宝赞助帐号:service@kuitao8.com 

jQuery返回顶部代码

Created2013-10-01   Views 2256    Author 懒人程序
/**
 * html代码
 * <div id="roll" style="display: none;cursor: pointer;">
 *   <div id="roll_top">返回顶部</div>
 * </div>
 */
$(function(){
    $(window).scroll(function() {
        if($(window).scrollTop() >= 100){
            $('#roll').css({
                'position':'fixed',
                'top':'100px',
                'right':'20px'
            }).fadeIn(400);
        }else{
            $('#roll').fadeOut(200);
        }
    });
    $('#roll_top').click(function(){
        $('html,body').animate({scrollTop: '0px'}, 800);
    });
})

 

 

   

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

上一篇: JQuery选择过滤器
下一篇: jQuery选择器总结
支持键盘 ← →

邮件订阅

订阅我们的精彩内容