添加滚动高达动画面板

Question

我创建了使用动画倒在点击面板：

<script> 
function toggleSlider() { 
    if ($("#panelThatSlides").is(":visible")) { 
     $("#contentThatFades").animate(
      { 
       opacity: "0" 
      }, 
      600, 
      function(){ 
       $("#panelThatSlides").slideUp(); 
      } 
     ); 
    } 
    else { 
     $("#panelThatSlides").slideDown(600, function(){ 
      $("#contentThatFades").animate(
       { 

       opacity: "1", 
       }, 
       600 
      ); 
     }); 
    } 
} 
</script> 

这个伟大的工程，但是当它以动画下来一些屏幕尺寸，你看不到的内容（它低于浏览器底部边缘）。我需要做的是让页面同时滚动 - 任何想法？ YHX

Answer 1

您所需要的基本功能是：

$('html,body').animate({ 
    scrollTop: $('#panelThatSlides').offset().top 
}, 600); 

UPDATE：

只是一个ID [id="sliderbtn"]添加到您的锚和删除onclick事件。

<a href="#" onclick="toggleSlider();"><img alt="" src="/images/css/blind.jpg" /></a> 

更新与此javascript：

$(document).ready(function() { 
$("#sliderbtn").click(function() { 
if ($("#panelThatSlides").is(":visible")) { 
    $("#contentThatFades").animate(
     { 
      opacity: "0" 
     }, 
     600, 
     function(){ 
      $("#panelThatSlides").slideUp(); 
     } 
    ); 
} 
else { 
    $("#panelThatSlides").slideDown(600, function(){ 
     $("#contentThatFades").animate(
      { 
       opacity: "1" 
      }, 
      600 
     ); 
     $('html,body').animate({ 
     scrollTop: $('#panelThatSlides').offset().top 
     }, 600); 
    }); 
} 
}); 
}); 

见，如果这是你想要的。 :)