jQuery- 新增資料後 自動捲動至底部

最近的一個需求，當 append DOM 到另一個 div 時，若內容超過 div 的高度時，需要自動捲動到 div 最下面。

首先準備類似上面那張圖的配置，左邊放要append到右邊的內容，右邊則限制高度跟寬度。

view plaincopy to clipboardprint

1. $block_r=$(".block_r");   
2. $("#move").click(function(){   
3.     $ele=$(".block_l .element").clone(); //複製DOM   
4.     $block_r.append($ele); //append 到另一個div   
5.     $scrollHeight=$(".block_r")[0].scrollHeight; //scroll的高度   
6.     $block_r.animate({ scrollTop: $scrollHeight}, 200); //控制scroll bar的位置 並加一點動畫效果   
7. });  

再寫一點code就完成啦。

Demo