本文主要介紹了使用 Ajax 列表返回原位置的方法。隨著互聯網的發展，Ajax 技術被廣泛應用于網頁開發中。通過使用 Ajax 列表，用戶可以在網頁上無需刷新整個頁面的情況下獲取最新的數據。然而，當用戶進行排序、過濾或分頁等操作時，頁面的位置通常會發生改變。本文將介紹如何通過保存用戶的滾動位置，并在列表更新后將頁面重新滾動到原來的位置。

假設我們有一個包含大量數據的列表，用戶可以通過滾動來瀏覽列表。當用戶滾動到列表的底部時，我們使用 Ajax 請求加載更多數據并將其添加到列表的末尾。此時，我們要確保列表加載完畢后，頁面能夠回到用戶滾動的位置。以下是一種實現方式：

<script>
// 保存滾動位置
function saveScrollPosition() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
sessionStorage.setItem('scrollPosition', scrollTop);
}
// 恢復滾動位置
function restoreScrollPosition() {
var scrollTop = sessionStorage.getItem('scrollPosition');
document.documentElement.scrollTop = document.body.scrollTop = scrollTop;
}
// Ajax 請求加載更多數據
function loadMoreData() {
// 發送 Ajax 請求...
// 加載數據...
// 恢復滾動位置
restoreScrollPosition();
}
</script>

在上面的代碼中，我們使用了兩個函數來保存和恢復滾動位置。當用戶的滾動位置發生變化時（例如，用戶滾動到列表底部觸發加載更多數據），我們在加載完數據后調用restoreScrollPosition()函數來將頁面重新滾動到原來的位置。

以上代碼中使用了sessionStorage來保存滾動位置。sessionStorage是一個會話級別的存儲對象，可以用來在瀏覽器會話之間存儲數據。在用戶的滾動位置發生變化時，我們通過調用sessionStorage.setItem()方法將滾動位置保存下來。而在頁面加載完數據后，我們通過調用sessionStorage.getItem()方法將保存的滾動位置取回并將頁面滾動到該位置。

使用示例：

<ul id="list">
<!-- 列表內容 -->
</ul>
<script>
var list = document.getElementById('list');
var isLoading = false;  // 當前是否正在加載數據
// 監聽列表滾動事件
list.addEventListener('scroll', function() {
if (list.scrollTop + list.offsetHeight >= list.scrollHeight && !isLoading) {
isLoading = true;  // 設置為正在加載數據
// 保存滾動位置
saveScrollPosition();
// 加載更多數據
loadMoreData();
isLoading = false;  // 設置為加載數據結束
}
});
// 首次加載數據
loadMoreData();
</script>

在上面的示例代碼中，我們監聽了列表的滾動事件。當用戶滾動到列表底部時，我們判斷是否正在加載數據，以避免重復觸發加載動作。如果當前沒有正在加載的數據，我們將isLoading設置為true，表示正在加載數據，然后調用saveScrollPosition()函數保存滾動位置，并調用loadMoreData()函數加載更多數據。在數據加載完畢后，我們將isLoading設置為false，表示加載數據已結束。

通過以上的方法，我們可以實現在 Ajax 列表中返回原位置的功能。用戶可以自由地瀏覽列表，進行排序、過濾和分頁等操作，而無需擔心頁面位置的改變。在加載數據后，頁面會自動回滾到用戶上次滾動到的位置，為用戶提供良好的瀏覽體驗。