footer div가 slideDown으로 크게 펼쳐지면서 페이지를 아래로 스크롤하는 방법은 무엇입니까?

Question

기본적으로 표시 : 없음 인 바닥 글 영역이 있습니다. 이 하단 바닥 글 영역에는 메뉴 및 소셜 링크와 같은 항목이 있습니다.

이 메뉴를 보려면 페이지의 맨 아래까지 스크롤하십시오 (끝까지 스크롤하면 더 멀리 스크롤 할 수 없습니다). '확장'이라는 버튼이 표시됩니다. 일단 그렇게하면 내용을 보유하는 확장 버튼 아래의 div가 slideDown()으로 애니메이션이 적용됩니다.

문제는 아래쪽으로 움직이는 것처럼 페이지의 아래쪽 가장자리와 함께 스크롤하지 않습니다 ... 그래서 언뜻보기에는 조금 더 아래로 스크롤해야한다는 것을 알기 전까지는 아무 일도 일어나지 않습니다. 나는 그것이 자동으로 정확한 속도/길이로 페이지를 자동으로 스크롤하기를 원한다.

물론

$('#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/ 바닥 글은 맨 아래에있을되지 않습니다있는 posibility이 있으면

, 당신은 if..then을 필요가 scrollTop() == 0 여부를 확인하기 위해, 이 경우 slideDown()을 사용하십시오.