ASP.NET PostBack 後自動捲動到原位置：三大原生方案完整指南

ASP.NET WebForms PostBack 導致頁面重載，瀏覽器預設捲動至頂部，體驗極差。本文總結 三種原生無需外部庫 的解決方案：MaintainScrollPositionOnPostback (最簡單)、jQuery 錨點捲動 (最靈活)、HTML 錨點模擬點擊 (最相容)，附配置細節與適用場景。

方案一：MaintainScrollPositionOnPostback (官方內建，推薦優先)

A. 頁面級設定

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

B. 應用程式/目錄級設定 (Web.config)

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

C. 程式碼動態設定

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

原理與限制

• ASP.NET 在回應中註冊啟動腳本，記錄 `scrollTop`/`scrollLeft`，載入後恢復。
• 僅支援 IE/Edge/Chrome/Firefox 現代瀏覽器，舊版瀏覽器可能失效。
• UpdatePanel 部分更新 時可能行為異常，需測試驗證。
• 跨頁面 PostBack (Response.Redirect/Server.Transfer) 不生效。

方案二：jQuery 精確捲動到指定元素

function scrollToElement(elementId) {
    var top = $("#" + elementId).offset().top;
    $("html, body").animate({ scrollTop: top }, 1000); // 1 秒平滑捲動
}

// 頁面載入後自動呼叫 (需配合伺服器端註冊)
$(document).ready(function() {
    // 伺服器端可註冊：ClientScript.RegisterStartupScript(..., "scrollToElement('targetDiv');", true);
    scrollToElement('targetDiv');
});

優點：可精確控制捲動目標、動畫平滑、不依賴 ASP.NET 內部機制。缺點：需引入 jQuery、需知道目標元素 ID。

方案三：HTML 錨點 + 模擬點擊 (零 JS 依賴，相容性最強)

1. 頁面佈置錨點

2. 伺服器端註冊啟動腳本

// 在 PostBack 處理完畢、回應前註冊
Page.ClientScript.RegisterStartupScript(
    this.GetType(), 
    "scroll", 
    "document.getElementById('clickLink').click();", 
    true);

原理

1. 瀏覽器載入頁面，執行啟動腳本。
2. 腳本找到隱藏連結 `` 並模擬 `.click()`。
3. 瀏覽器原生處理錨點跳轉，捲動至 `` 位置。