jquery滚动条固定在某一位置

查看历史消息的时候，需要将滚动条维持在正在查看的消息位置。 本方法是通过添加属性data-msg获取当前的位置，offset().top获取滚动距离，demo如下：

html：

<div class="box">
<div class="messageBox">
<p>原数据1</p>
<p>原数据2</p>
<p>原数据3</p>
<p data-msg="1">原数据</p>
<p>原数据2</p>
<p>原数据3</p>
</div>
<p class="edit">&nbsp;</p>
<div class="sendBtns"><span id="insertUp">向上插入</span> <span id="insertDown">向下插入</span></div>
</div>

css:

body,html,div,p{margin: 0;padding: 0;}
.box{width: 500px;border: 1px solid black;margin: 100px auto;} 
.messageBox{width: 500px;height: 300px;border-bottom: 1px solid black;overflow-x:hidden;overflow-y:scroll;position: relative;}
.messageBox p{width: 100%;height: 50px;line-height: 50px;}
.edit{width: 498px;height: 70px;border: 1px solid red;} 
.sendBtns{width: 100%;height: 30px;background: #ccc;padding: 5px 0}
.sendBtns span{display: inline-block;width: 100px;height: 30px;line-height: 30px;margin: 0 50px;border: 1px solid black;text-align: center;}

 js：

$(document).ready(function(){ 
var messageBoxDom = $('.messageBox'); 
$('#insertUp').click(function(){ // 查看历史消息的情况 
　　var message = $('.edit').text(); 
　　$('.edit').empty();
　　messageBoxDom.prepend(message); 
　　scroolByMsgId(messageBoxDom,'1'); 
});
$('#insertDown').click(function(){ //添加新消息的情况 
　　var message = $('.edit').text(); 
　　$('.edit').empty(); 
　　messageBoxDom.append(message);
　　scroolByMsgId(messageBoxDom,'1'); 
});
function scroolByMsgId(messageBoxDom,msgId){
　　var scrollPx = messageBoxDom.find('p[data-msg='+ msgId +']').offset().top - messageBoxDom.find('p:eq(0)').offset().top; 
　　messageBoxDom.scrollTop(scrollPx); //滚动条滚动的距离=p【data=1】距离顶部的距离-messageBox第一个p距离顶部的距离 
}; 
})