jquery scrolltop不能在firefox中工作

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这里：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); 
     } 

    }); 

适用于JSF的演示此处：http://jsfiddle.net/6fUY5/5/