首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery回到顶部

2012-10-07 
jQuery返回顶部.backToTop {display: nonewidth: 18pxline-height: 1.2padding: 5px 0background-colo

jQuery返回顶部

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

?

jQuery(function() {    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').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(); });});

?

?

资源:http://www.zhangxinxu.com/study/201104/back-to-top-jquery.html?jdfwkey=da0132

热点排行