Question

我的涉及scrollTop的脚本在firefox中无法正常工作。这是脚本：

$(document).ready(function(){
$("#slideup1").mouseover(function(e) {
    e.preventDefault();
    $(".ftc1").delay(100).fadeIn(200);
    $(".ftc2").fadeOut(100);
    var $more = $(".footcontent").slideDown(260);
    $("body").animate({
        scrollTop: $more.offset().top
    }, {
        duration: 260,
        queue: false
    })
});
$("#slideup2").mouseover(function(e) {
    e.preventDefault();
    $(".ftc2").delay(100).fadeIn(200);
    $(".ftc1").fadeOut(100);
    var $more = $(".footcontent").slideDown(260);
    $("body").animate({
        scrollTop: $more.offset().top
    }, {
        duration: 260,
        queue: false
    })
});
$("#frame").mouseover(function(e) {
    e.preventDefault();
    var $more = $(".footcontent").slideUp(260);
    $("body").animate({
        scrollTop: $more.offset().top
    }, {
        duration: 260,
        queue: false
    })
});
});

它不是最优雅的，但通常有效（除了在Firefox中）。当页脚滑动打开时，scrollTop用于将窗口保持在页面底部。它在Chrome中运行良好，但在Firefox中，页脚会在页面边缘下方滑动打开，而不会向下滚动。

这是jsfiddle： http://jsfiddle.net/6fUY5/3/

我知道这个主题还有其他一些帖子，但这些解决方案似乎都不适用于我。

谢谢！

Answer 1

我已更新您的代码，如下所示。请尝试测试。对于JSFiddle中的Demo：http://jsfiddle.net/6fUY5/5/

Html代码

<div id="frame">    
    <div class="content" style="background:#41423C">
        <div class="photogrid">
            <a href="img/1.jpg" title="day 123"><img src="img/1.jpg" width="140px" height="140px" /></a>
            <a href="img/2.jpg"><img src="img/2.jpg" width="140px" height="140px" /></a>
        </div>
    </div>
</div>
<footer>
    <div class="footcontent">
        <div class="ftc1">
            <p>Email</p>
            <p>credit</p>
            <p>twitter</p>
            <p>facebook</p>
            <p>linkedin</p>
        </div>
        <div class="ftc2">
            <p>Email2</p>
            <p>credit2</p>
            <p>twitter2</p>
            <p>facebook2</p>
            <p>linkedin2</p>
        </div>
    </div>
    <div class="foothead">
        <a id="slideup1" href="">Footer1</a>
        <a id="slideup2" href="">Footer2</a>
    </div>
</footer>

CSS代码

#frame {
        width:100%;
        height:100%;
        clear:both;
        position:relative;
        font-family: Gotham, sans-serif;
        letter-spacing:.3px;
        color:#eee;
        overflow:hidden;
        box-shadow: 0px 5px 5px -3px #222;
        z-index: 2;
    }
    .content {
        height:100%;
        width:100%;
        position:relative;
    }

    .photogrid {
        height:auto;
        min-height:300px;
        width:70%;
        padding:80px 10% 80px 20%;
    }
    .photogrid img {
        width:140px;
        height:auto;
        margin:10px;
        border:2px solid #aaa;
        border-radius:4px;
    }

    footer {
        width:100%;
        height:auto;
        text-align:center;
        background-color:#333;
        z-index: 1;
        margin-top: -50px;
    }
    .foothead {
        height:40px;
        width:70%;
        line-height:38px;
        color:#bbb;
        clear:both;
        padding:0 10% 0 20%;
    }
    .foothead a {
        font-size:12px;
        float:right;
        color:orange;
        padding:0 5px 0 50px;
        text-decoration:none;
    }
    .foothead a:hover {
        text-decoration:underline;
    }
    .footcontent {
        height:50px;
        width:100%;
        position:relative;
        line-height:20px;
    }
    .ftc1, .ftc2 {
        display:none;
        height:auto;
        width:70%;
        padding:0 10% 0 20%;
        bottom:0px;
        position:absolute;
        clear:both;
    }
    .ftc1 p, .ftc2 p {
        font-size:12px;
        float:right;
        color:#fff;
        padding:0 5px;
    }

Javascript代码

$(document).ready(function(){
        //Footer 1
        $('#slideup1').mouseover(function(e) {
            e.preventDefault();
            $(".ftc1").delay(100).fadeIn(200);
            $(".ftc2").fadeOut(100);

            AnimateHover('#frame','footer');

        });

        //Footer 2
        $('#slideup2').mouseover(function(e) {
            e.preventDefault();
            $(".ftc2").delay(100).fadeIn(200);
            $(".ftc1").fadeOut(100);

            AnimateHover('#frame','footer');

        });

        //Ifame Hover
        $('#frame').mouseover(function(e) {
            $('.ftc1, .ftc2').fadeOut(100);
            animateLeave('#frame','footer');
        });

        //Mouse Hover
        function AnimateHover(idIframe, idFooter) {
            $(idIframe).stop().animate({
                'margin-top': '-50px'
            }, 260);
            $(idFooter).stop().animate({
                'margin-top': '0'
            }, 260);
        }
        //Mouse Leave
        function animateLeave(idIframe, idFooter) {
            $(idIframe).stop().animate({
                'margin-top': '0'
            }, 260);
            $(idFooter).stop().animate({
                'margin-top': '-50px'
            }, 260);
        }

    });

对于JSFiddle中的演示：http://jsfiddle.net/6fUY5/5/

Jquery scrollTop无法在firefox中运行

1 个答案: