jq实现页面悬浮置顶按钮

最新推荐文章于 2024-07-21 19:17:17 发布

盖塔虎

最新推荐文章于 2024-07-21 19:17:17 发布

阅读量1.9k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

按钮样式

.backToTop
{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 0px;
    bottom: 0px;
    cursor: pointer;
    background-image: url("/Content/ExtraPic/gotop.png");/*按钮背景图片*/
}

jquery

function backToTop() {
    var $backToTopTxt = "";
    var $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt).attr("title", $backToTopTxt).click(function () { $("html, body").animate({ scrollTop: 0 }, 120); });
    var $backToTopFun = function () {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
        (st > 0) ? $('.piaofu').show() : $('.piaofu').hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $backToTopFun();
}