[Javascript] Controlling Page Scroll Position

[paul at novitskisoftware.com (Paul Novitski)]

At 09:27 PM 6/28/2005, David Pratt wrote:
>Instead of resetting when a new page is selected, I want the vertical
>scrollbar to maintain its  position so when the link is clicked, the
>vertical scrollbar position is passed to the next page (so the page
>does not jerk to the top but stay in the same position to user's are not
>forced to pull the page down to the table to see the results.
>
>I am using css to style anchor tags as buttons and am currently passing
>the record start position for the page to the next page.
>ie   <a class="page_plain"
>href="https://mydomain.com/path/index_html?start:int=20";>2</a>
>
>I am assuming the best way of handling this would be to pass the
>current vertical scroll position as a parameter to a JavaScript.  Does
>anyone have such a solution or other advice for solving this?


David,

I can think of two ways to approach this:

1) When the link is clicked, run a javascript function which adds the 
vertical scroll position to the link's href URL.

2) Use a submit button instead of a link, and add the vertical scroll 
position as a hidden form field.


The first solution would apply the onlick event to the link on page load:

<a id="nextpage" class="page_plain"
href="https://mydomain.com/path/index_html?start:int=0";>2</a>

window.onload = initLink;

function initLink()
{
         var oLink = document.getElementById("nextpage");
                 if (!oLink) return;
         oLink.onclick = goNextPage;
}

function goNextPage(evt)
{
                 // cancel event bubbling
                 if (evt)
                 {
                         event = evt;
                 }
                 event.cancelBubble = true;

         var oLink = document.getElementById("nextpage");
         oLink.href += window.scrollY;
}

The second solution would do much the same, except capturing the document's 
onsubmit event and setting the value of a hidden form field instead.

A script on the next page to load will then use the querystring argument to 
execute window.scrollBy() or window.scrollTo().  (Let us know if you need 
help parsing that value.  I typically split the querystring into an array 
on each "&", and each argument/value pair on each "=", searching for the 
argument I want.


To step back a pace, I'd caution you that the convention you're proposing 
is so different from the way web pages work in general that you're liable 
to irritate your users unless you notify them from the start to expect this 
auto-scrolling.  Clicking the browser Back button will typically return you 
to the exact position on the previous page from which you'd navigated away, 
but as you know linking forward typically displays the top of the next page 
and it might be disconcerting to bring people farther down.  I assume that 
the reason you want to do this is to let people remain on a given row of a 
table as they scroll forward.  I hope the benefit of doing so will outweigh 
any potential confusion.

Regards,
Paul