新闻中心

联系我们

QQ:355997214

邮箱:admin@x6cms.com

联系人:小六

网址:http://www.x6cms.com

地址:西安市高新区唐延路1号旺座国际城B座9层

jquery返回顶部代码3

来源:小六 | 浏览量:404 | 发布时间:2012-08-09 17:31:56

以下返回顶部代码在ie8、ie9、firefox下测试通过,ie6、ie7下未测试,只要做过程序的朋友都知道,ie6是个大麻烦,ie7是个半成品,小六科技以后发布的程序都将不支持ie6、ie7。敬请广大网友升级ie8、ie9浏览器

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代码:

$(document).ready(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();    
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);    
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $backToTopFun();
});

注:页面中需要先加载jquery,返回顶部代码才能实现

 


聚合标签:

或许您会感兴趣: