ASP.NET Postback 後自動保持捲軸位置三大技巧總整理

痛點：Postback 導致頁面跳回頂端

ASP.NET WebForms 預設 Postback 後瀏覽器會重置捲軸位置，長頁面操作體驗極差。本文整理三種原生與客戶端解決方案，涵蓋頁面級、應用程式級與精準控制三種層次。

方案一：內建 MaintainScrollPositionOnPostback 屬性（最簡單）

1. 頁面指示詞層級

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

2. Web.config 應用程式/目錄層級

<system.web>
    <pages maintainScrollPositionOnPostBack="true" />
</system.web>

根目錄 web.config 影響全站；子目錄 web.config 僅影響該目錄頁面。

3. 後端代碼動態控制

Page.MaintainScrollPositionOnPostBack = true;
// 或
this.MaintainScrollPositionOnPostBack = true;

原理：ASP.NET 註冊 WebForm_SaveScrollPositionSubmit() 與 WebForm_RestoreScrollPosition() 腳本，利用隱藏欄位 __SCROLLPOSITIONX/Y 記錄/還原座標。

方案二：jQuery 精準定位特定元素（彈性最高）

function scrollToElement(elementId) {
    var $target = $('#' + elementId);
    if ($target.length) {
        var top = $target.offset().top;
        $('html, body').animate({ scrollTop: top }, 500); // 平滑動畫
    }
}

// 頁面載入後呼叫
$(function() {
    scrollToElement('targetElementId');
});

適用場景：需捲動至錯誤訊息、新增資料列、Tab 切換錨點等自定義位置。

方案三：錨點觸發法（零 JS 依賴，相容性最佳）

1. 頁面佈局置入錨點

<span id="scrollAnchor" name="scrollAnchor"></span>
<a href="#scrollAnchor" id="scrollTrigger" style="display:none;"></a>

關鍵：<a> 標籤不可有內容，且必須在 <form> 內。

2. 後端觸發點擊

Page.ClientScript.RegisterStartupScript(this.GetType(), "scroll",
    "document.getElementById('scrollTrigger').click();", true);

本質上模擬使用者點擊錨點連結，瀏覽器原生處理捲動，無相容性疑慮。

方案比較與選型指南

進階提示：UpdatePanel 部分更新時的處理

搭配 PageRequestManager 的 endRequest 事件：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    scrollToElement('updatedRegionAnchor');
});