在JSP页面中保存滚动条的位置

Question

I have a DIV that is scrollable and have a table inside this. Is it possible to capture the scroll position in some type of onmove() method so I can put it in a cookie and restore the scroll bar to the same position when the page reloads. Here is my JSP code

    <div id="wordListTableDiv" style="overflow: auto;height: 700px; width: 320px; max-width:320px; border:2px solid black;  background-color: #FFFFF0; padding: 10px">
        <br>
        <div>    
            <br>
            <input type="button"  value="Show All" onclick="getWordList()" style="float: left;"> 
            <input type="button"  value="Hide Ignored and Good" onclick="hideIgnoredAndGoodWords();" style="float: right;"> 
        </div> 
        <br></br>

        <table id="wordListTable"  border=1 >
            <thead id="wordListTableHead"><tr>
              <th width="150">Word</th>
              <th width="150">State</th>                                  
            </tr></thead>
            <tbody><%-- Empty to begin with, filled by JavaScript. --%></tbody>
        </table>            
    </div>  

The JavaScript I have is

    function setScrollPosition()
    {
        //If the scroll position was set previously then reposition it to the old value.
        var scrollPosition = readCookie("scrollPositionCookie");
        if( scrollPosition != null )
        {
            $("#wordListTableDiv").scrollTop( scrollPosition );
        }
    }

but unless I open firebug and set a break point where it sets the scroll value from my cookie it will always go to position '0'. Am I correct in thinking this is a timing issue?

Please ignore Question. I've spotted a JSON call that is causing my timing issue :(

Answer 1

我创建了这个小提琴来演示如何。