[Javascript] Controlling Page Scroll Position

[David Pratt]

Hi Paul. Many thanks for your reply.  I was reading in Definitive Guide 
to JavaScript last night about  x and y coodinates available in anchor 
tags so was thinking what possible way to get these values (which it 
did not say much about) and  pass this info to the scroller of next 
page so it knows what position to go to when new page loads. I think 
the trick is how to get the y coordinate so its can be passed.  All I 
need is the y value, true?

My pager looks like

first  previous   1  2  3  4  5  next  last

Previous and next are not active unless you advance to next which puts 
page number 2 thru 6.  If there are fewer than 5 pages only that number 
will show. If there are more than 5 pages next and last is active and 
it scrolls the numbers to always keep 5 page numbers in view with the 
current page always marked (class attribute is page_selected) on 
selected page.

So first problem is that an id would not work since I have at least 7 
links that cannot share the same id. The first, previous, last and next 
   are enclosed in a span tag so I have more control over the css and 
have anchor tags only when they are active.  The five pages use either 
page_plain or page_selected  (only one would have page_selected) at a 
time to show the active page.  So how to get the value from the anchor 
tag.  I thought about submit buttons but I have got a fair amount of 
code that does all of my paging magic now and I am pretty much 
committed to anchor tags for a variety of reasons including more 
styling flexibility with css..

I am also doing something a bit funky with my application to make 
pretty urls for users and search engines so the order of parameters is 
important as well.  Depending on the column titles or page, it is 
passing a start, sort and reverse parameter for paging/sorting results 
for the user.

With the templating language I am using - ZPT (Zope Page Templates), I 
should be able to make this behavior optional for the user so that they 
will be able to turn this feature on or off since I can make any 
javascipt conditional on a whether a boolean property is True. It not, 
it would not exist on the page.

For me even though it is the norm for page advance is to go to the top, 
I find it personally annoying when I am in a series of rows and want to 
advance to the next set page of rows without bouncing to the top where 
the same instructions exist and have to pull down to view my next 
series of results in the table.  I am thinking users may appreciate 
this and I would likely make it an optional behavior.

Regards,
David

On Wednesday, June 29, 2005, at 03:03 AM, Paul Novitski wrote:

> 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
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>