用jQuery保持滚动位置

当我们在更新页面的内容，并且希望在更新后不改变用户滚动到的位置时，用jQuery可以很方便地完成这个任务。

实现思路

我们可以在更新页面内容后取得用户当前滚动的位置，然后将滚动位置保存在变量中。更新后重新滚动到该位置。下面是具体的实现思路：

1. 在更新页面内容前，使用$(window).scrollTop()来获取页面当前的滚动位置。

2. 更新页面内容。

3. 使用$(window).scrollTop()来获取页面更新后的滚动位置。

4. 如果滚动位置变化了，则使用$(window).scrollTop()重新将页面滚动到该位置。

代码实现

// 保存当前的滚动位置
var currentScroll = $(window).scrollTop();

// 更新页面内容
// ...

// 获取更新后的滚动位置
var newScroll = $(window).scrollTop();

// 如果滚动位置变化了，则重新滚动到该位置
if (currentScroll !== newScroll) { 
  $(window).scrollTop(currentScroll);
}

最佳实践

为了更好地用户体验，我们应该在更新页面内容之前，将页面滚动到顶部，这样用户在更新后不需要再手动滚动页面。

// 将页面滚动到顶部
$(window).scrollTop(0);

// 保存当前的滚动位置
var currentScroll = $(window).scrollTop();

// 更新页面内容
// ...

// 获取更新后的滚动位置
var newScroll = $(window).scrollTop();

// 如果滚动位置变化了，则重新滚动到该位置
if (currentScroll !== newScroll) { 
  $(window).scrollTop(currentScroll);
}

这样的话，即使页面更新后用户也不会感到任何不适，页面滚动不会留下任何不良影响。