移动项目后保留屏幕上的位置答案

【问题标题】：Preserve position on screen after shuffling items around移动项目后保留屏幕上的位置
【发布时间】：2010-10-19 18:16:37
【问题描述】：

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

项目1
项目2
Item3 - 点击它会将 item1 移到其下方
项目4

点击后：

项目2
项目3
Item1 - 现在在 item3 下方，在屏幕上向上移动（坏）
项目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);

【问题讨论】：

标签： jquery html

【解决方案1】：

假设有滚动空间，您应该能够执行类似的操作。

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

这会将scrollTop 的位置调整为item3 的outerHeight 的量。

因为.scrollTop() 的值代表隐藏在顶部的像素数，我们减少隐藏的垂直像素数以便向下滚动页面，将#item3 恢复到其原始位置（或接近它） .

【讨论】：

谢谢，效果很好。如果要移动的项目位于单击的项目下方（在这种情况下我什么都不做），则需要对其进行修改，但我可以做到。

【解决方案2】：

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

【讨论】：