footer divがslideDownで大きく拡大するため、ページをスクロールダウンする方法は？

Question

デフォルトではdisplay：noneのフッタ領域があります。この下部のフッターエリアには、メニューやソーシャルリンクなどがあります。

このメニューを表示するには、ページの下端までスクロールしてください（遠方にスクロールすることはできません）。 「拡大」と表示されているボタンをクリックしてクリックします。これを行うと、コンテンツを保持する展開ボタンの下にあるdivは、slideDown（）でアニメーション化されます。

問題は、下にアニメーション化されるので、divの下端に沿ってページがスクロールしません...だから一見したところでは、少しスクロールする必要があることがわかるまで何も起こらないように見えます。私はそれがそれがアニメートする正確に同じ速度/長さでページを自動的にスクロールしたい。

もちろん

$('#footer-click a').click(function() { 
    if ($('#footer-inner').css('display') === 'none') { 
     $('#footer-click a').html('Hide'); 
     $('#footer-inner').slideDown('medium', function() { 
      $('html').scrollTop($('html').scrollTop() + $('#footer-inner').outerHeight()); 
     }); 
    } else { 
     $('#footer-click a').html('Expand'); 
     $('#footer-inner').slideUp('medium'); 
    } 
    return false; 
}); 

、これはそれが最後で一斉に起こるようになります：

HERESにクリック機能

$('#footer-click a').click(function() { 
    if ($('#footer-inner').css('display') === 'none') { 
     $('#footer-click a').html('Hide'); 
     $('#footer-inner').slideDown('medium'); 
} else { 
     $('#footer-click a').html('Expand'); 
     $('#footer-inner').slideUp('medium'); 
    } 
return false; 
}); 

Answer 1

あなたは余分な距離をスクロールするscrollTop()を使用することができるはずです。滑らかにするためにアニメーションをカスタマイズする必要があるかもしれません。 （...私はそれについて考えてみよう）

編集： OKあなたがしたいかもしれないものは、ページを下にスクロールするアニメーションを使用し、単にshow()フッターで、そして。同じ効果が得られます。以前のようにあなたはそれを同じように閉じることができます：

$(function() { 
    $('#footer-click a').click(function() { 
     if ($('#footer-inner').css('display') === 'none') { 
      $('#footer-click a').html('Hide'); 
      $('#footer-inner').show(); 
      // Some browsers use html, some use body. Use the bigger one: 
      var scrollY = $('body').scrollTop()?$('body').scrollTop():$('html').scrollTop(); 
      $('html, body').animate({ 
       scrollTop: scrollY + $('#footer-inner').outerHeight() 
      }, 'medium'); 
     } else { 
      $('#footer-click a').html('Expand'); 
      $('#footer-inner').slideUp('medium'); 
     } 
     return false; 
    }); 
}); 

例：http://jsfiddle.net/Eeq26/4/

を働かがある場合はフッターは、あなたがscrollTop() == 0かどうかを確認するif..thenが必要になり、一番下にはありませんその場合はslideDown()を使用してください。