2013年5月3日 星期五

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

scroll_to_bottom

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

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

  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

反應:

1 意見:

柯柯 提到...

你好 我照你的方式做完後 按下按鈕他是往上跑耶?

要怎調成讓他往下跑的方法

Related Posts Plugin for WordPress, Blogger...