jq实现页面悬浮置顶按钮

来源：互联网发布：淘宝无线端图片大小编辑：程序博客网时间：2024/05/29 07:06

按钮样式

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

0 0