오버플로가 숨겨져있을 때 맨 위로 스크롤

Question

overflow이 hidden 인 요소의 내용을 맨 위로 스크롤하는 방법이 있습니까?

사용 예 케이스 :

1. 컨테이너 요소는 시작 위치, 200 픽셀의 최대 높이를 갖는다는 60 픽셀이다.
2. 사용자가 "더보기"를 클릭하면 높이가 200 픽셀로 확장됩니다.
3. 200px보다 많은 콘텐츠가 있으므로 사용자는 목록의 맨 아래로 스크롤 할 수 있습니다.
4. 사용자가 "짧게보기"를 클릭하면 높이가 60px로 낮아집니다.
5. 목록이 더 이상 상단에없고 스크롤 할 수 없다는 점에서 문제가 발생합니다.

여기에있는 아이디어는 훌륭합니다.

Answer 1

저는 CSS에서는 불가능하다고 생각합니다.

element.scrollIntoView을 사용해 볼 수 있습니다.

scrollIntoView 검색 나는이 question on SO에서 jQuery의 scrollTop을 사용하는 것이 좋습니다.

Answer 2

그런 뜻입니까?

http://jsfiddle.net/8pvjf/

그것은 JQuery와 함께 할 수있다 실제로

$(document).ready(function(){ 

     $('.background').css('font-size',($(window).width()*0.1)); 

     $(".blow").each(function(){ 

     }); 



     $('.blow').on('click', function(event){ 
var element = $(this); 
if(element.attr('data-blow') == 'true'){ 
    element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false') 
    $(this).addClass('blow') 
    $(this).removeClass('overflow') 
} else { 
    element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){ 
     $('body').animate({ scrollTop: element.offset().top }); 
    }).attr('data-blow', 'true').addClass('overflow').removeClass('blow'); 


} 

});

 $(window).resize(function(){ 
$('.background').css('font-size',($(window).width()*0.1)); 

});

원하는만큼 코드를 재미있게 놀리십시오. 물론 이것은 이전의 저의 작품을 기반으로하므로 필요에 따라 수업과 스타일을 변경해야합니다. :)