在洗牌后保留屏幕上的位置

Question

我有很长的项目列表，点击某个项目可能会将另一个相关项目移到其下方。问题是如果移动的项目出现在被单击的项目上方，则移动会导致页面向上滚动并且鼠标不再位于用户焦点中心上方。 e.g。

• 项目1
• 项目2
• 第3项 - 点击此按钮将移动其下方的第1项
• 项目4

点击后：

• 项目2
• 项目3
• 第1项 - 现在位于屏幕上向上移动的第3项（不良）
• 项目4

要在jquery中进行移动，我使用$（'＃item1'）。insertAfter（'$ item3'）; 如何让Item3保持与窗口顶部保持相同的位置？

编辑：基于patrick-dw的答案的修改后的解决方案将鼠标/屏幕位置精确地保持在所点击的项目上：

var pos = $('#item3').offset().top; 
$('#item1').insertAfter($('#item3');    
pos = pos - $('#item3').offset().top; 
// it may not have scrolled if the shuffling happened entirely below it
if (pos > 0) $(window).scrollTop($(window).scrollTop() - pos);

Answer 1

假设有可以滚动的空间，你应该可以做类似的事情。

$('#item1').insertAfter('#item3');
$(window).scrollTop( $(window).scrollTop() - $('#item3').outerHeight() );

这会根据scrollTop的outerHeight数量调整item3位置。

由于.scrollTop()的值表示隐藏在顶部的像素数，因此我们减少隐藏垂直像素的数量，以便向下滚动页面，将#item3返回到其原始位置（或接近它。）

Answer 2

查看scrollTo插件。单击列表项后可以调用它。