jQuery动态更新字段滚动页面

我有一个用户填写的表单，单击“保存”并将其下移到表中。 从那里他们可以编辑一行或删除它。

但是，每次从表中添加或删除某些内容，或者从表中重新填充字段返回到表单中（从而从表中删除直到再次保存），页面会跳回到顶部。

因此，每当用户更新此区域时，他们必须向下滚动，这是一个非常大的forms。 我有大部分的部分崩溃，但像我一样，我怀疑用户会在他们向下移动时让他们打开。

有谁知道是什么导致这种情况，是否有任何真正简单的方法可以避免它？ 我是jQuery的新手，甚至是JS，我花了大部分时间在服务器端。

编辑：添加HTML：

 
 
 
 
Product
 
Units
 
Pieces
 
UOM
 
NMFC
 
Hazmat
 
class
 
weight
 
L
 
W
 
H
 
Cube
 
Density
 
 
 
 
 
 
 
  

Answer 1

试试这个

 $(SAVE/EDIT).click(function () { // your code return false; //add this }); 

Answer 2

最可能的罪魁祸首是您的实际元素的高度发生变化，导致包含元素的页面resize以适应它们。 从那里，这看起来像滚动动作。

在这个JSFiddle上，尝试在表中创建大量元素，然后单击它们以删除它们并将它们放回到表单中。 你会看到，一旦你有足够的元素，页面就会滚动。

http://jsfiddle.net/turiyag/VUqCB/3/

我打赌你实现表更新的方式是删除整个表并重建它？ 如果是这样，请尝试执行JSFiddle中举例说明的增量更新：

 $(function() { $(":button").click(function(event) { //Make a new table row (but don't insert it just yet var newTableRow = $(""); //For every textbox, add a corresponding data column to the new table row $.each($(":text"), function(index, obj) { //Store the id of the textbox the data is from in the "from" attribute. newTableRow.append('' + $(this).val() + ''); }); //Append the row to the table newTableRow.appendTo("table"); //When the row is clicked newTableRow.click(function() { //$(this) refers to the row element here //For every child element (td element) $.each($(this).children(),function(index, obj) { //$(this) refers to the td element here //In the textbox with the id we previously stored in the from attribute //Set the value of that textbox to the value of this td $("#" + $(this).attr("from")).val($(this).text()); }); //$(this) refers to the row element here $(this).remove(); }); //Reset the form //$("form")[0].reset(); event.preventDefault(); }); });