當隱藏溢出時滾動到頂部

Question

有沒有辦法滾動overflow爲hidden的元素的內容到頂部？

實施例用例：

1. 集裝箱元件具有200像素一個最大高度，起始位置是在60像素。
2. 用戶點擊「顯示更多」，高度擴大到200px。
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)); 

}）;

玩得開心隨着這些代碼儘可能多的，你想要的。 當然，這是基於我以前的一些工作，您需要根據您的需要更改您的課程和樣式。 :)