2016-02-27 24 views
1

我有一個rails應用程序並使用引導程序。更新並重新插入對象後,我想通過快速動畫滾動到div的頂部,因爲我基於updated_at進行了排序。我嘗試了不同的版本,但不能使它正常發生。我所做的只是能夠滾動到沒有動畫的窗口頂部。插入對象後jquery滾動

我該如何讓它工作?

<body> 
    <header>.....</header> 
    <div id ="sidebar">...</div>  //this is not scrollable 
    <div id = "page-content-wrapper"> //I can't decide which one is the scrollable one(wrapper/container/post-index) 
    <div class="container-fluid post-container"> 
     <div class="post-index new-post-insert"> 
     <%= render @posts %> 
     </div> 
    </div> 
    </div> 
</body> 

create.js.erb(當對象被更新了這個被調用)

$('#post_<%= @post.id %>').remove(); //old object gets removed 
$(".new-post-insert").prepend($post); //new object get inserted to the top 

//THIS ONE IS WORKING, BUT NOT IDEAL 
window.scrollTo(0,0); 

//I ALSO TRIED THESE WITH DIFFERENT CLASSES (wrapper/container/post-index) BUT NON OF THESE WERE WORKING 
//window.animate({ scrollTo(0,window.offset().top) }, 1000); 
//$('.post-container').scrollTop(100); 
//$('#page-content-wrapper').scrollTo(0, $('#post_<%= @post.id %>').offset().top); 
//$('.new-post-insert').stop().animate({scrollTop: $post.offset().top}, '500'); 
//$('#page-content-wrapper').scrollTop($('.post-index')[0].scrollHeight); 

回答

0

嘗試使用這個,如果你想有一個平滑的動畫

$("html, body").animate({ scrollTop: 0 }, "slow");