關於保持頁面捲軸位置的一些體會

在一個很長的列表中進行操作，當使用者觸發PostBack事件的時候，需要保持捲軸所在位置。搜尋了一下，發現有兩種方法可以實現。第一種，在msdn中找到的，設定Page的SmartNavigation（智能導航）屬性為True。原文的備忘是這樣說的：

在大多數情況下不要在代碼中設定該屬性。在 .aspx 檔案的 指令中將 SmartNavigation 屬性設定為 true。請求該頁時，動態產生的類將設定該屬性。

Internet Explorer 5.5 或更高版本瀏覽器請求頁時（或稍後），智能導航將通過執行下列功能提高使用者對該頁的操作能力：

• 消除導航導致的閃爍。
• 從一頁移動到另一頁時保持滾動位置。
• 保持導航之間的元素焦點。
• 在瀏覽器的記錄中只保留最後一頁的狀態。

智能導航最適用於需要頻繁回傳但是其可是內容在返回時不會發生顯著更改的 ASP.NET 頁。在決定是否將該屬性設定為 true 時，請仔細考慮這一點。

對aspx頁面來說，真的是很簡單，只需要在頁面頭的@ Page後面多加一個SmartNavigation="True"就ok了，經簡單的測試，沒有問題，顯示效果良好。但實際應用中卻發現了問題。報告有js指令碼錯誤，無論如何也保持不了捲軸的狀態。經分析，發現是該頁面調用了ascx（Custom Control）的緣故，且拉長頁面的也正是拜ascx控制項所賜。於是乎，考慮將SmartNavigation="True"添加到ascx頁面中。結果，失敗！ascx不支援@Page指令！雖說ascx也是一個頁面，但和aspx還是有區別的。看來這種方法是解決不了這個問題的，只得令尋他法。

經再次搜尋，發現有人用js指令碼寫過這個方法（感謝寶玉提供的js）。js是在用戶端啟動並執行，只要我的aspx頁面能解析到用戶端，不都是html檔案麼，從理論上說，用js的方法是可以實現的。於是馬上動手實驗，結果，成功！雖然當頁面內容很多的時候有一個稍微明顯的閃動，但捲軸可以保持在PostBack前的位置，與需求相符，問題解決。

ps：另附js指令碼

<script language="javascript">
<!--
//  擷取當前檔案名稱
function getFileName()
{
    var url = this.location.href;
    var pos = url.lastIndexOf("/");
    if(pos == -1)
        pos = url.lastIndexOf("//");
    var filename = url.substr(pos+1);
    return filename;
}

function fnLoad()
{
    with(window.document.body)
    {
        addBehavior ("#default#userData");    // 使得body元素可以支援userdate
        load("scrollState" + getFileName());    // 擷取以前儲存在userdate中的狀態
        if (sFirstEnter=="0")
        {
            scrollLeft = getAttribute("scrollLeft");    // 捲軸左位置
            scrollTop = getAttribute("scrollTop");
        }
    }
}
function fnUnload()
{

    with(window.document.body)
    {
        setAttribute("scrollLeft",scrollLeft);
        setAttribute("scrollTop",scrollTop);
        save("scrollState" + getFileName());    
        // 防止受其他檔案的userdate資料影響，所以將檔案名稱加上了
        // userdate裡的資料是不能跨目錄訪問的
    }
}

window.onload = fnLoad;
window.onunload = fnUnload;
// -->
</script>