jQuery/CSS : showing a div at the bottom of ages causes scroll bar and you can't see the div

Question

我想在我的网站底部添加一个显示和隐藏 div 的按钮。当您单击按钮时，div 会显示出来，但它会创建额外的滚动空间，您看不到 div。这里的例子

http://jsfiddle.net/G2Fqe/ (如果你滚动到按钮并点击蓝色按钮

当我将 div 放在菜单栏顶部时，会发生同样的事情。有没有办法将视口(viewport)与新的 div 对齐？或者我不知道的东西？非常感谢您的帮助

Answer 1

试试这个:

    $(function(){

         $("div.button1-content").hide();

            $('a#button1').click(function(){
                $('div.button1-content').toggle(0, function() {
                    $('html, body').animate({scrollTop: $('div.button1-content').offset().top - $('div.button1-content').height() + 'px'}, 200);  
                });
            });
   }); 

您需要对此进行调整，以便在隐藏该 div 后它可以正确滚动，但我认为这就是您正在寻找的一般想法。