Get current scroll position and pass it as a variable with a link?

Question

I'll be honest, I'm way out of my depth here. I've created a pagination system where you click on a link it reloads the page and a certain number of list items are shown in an unordered list. When you click it again it'll reload the page and more items showing. Think how Twitter shows the tweets in your feed.

The problem is when it reloads the page it stays at the top. What I would like is for it to jump to the same position on the page it previously had.

I already have a selector for the link set up fine I just don't know how to get the current scroll position and then pass it to the new page for it to jump to.

Here's my code so far:

jQuery(document).ready(function(){
    $("a[rel=more]").live("click", function(){
        //script...
    });
});

Where do I go from here?

I'm also working on AJAX to make this work but in order to do that I need to be able to read XSLT variables with javascript. You can answer that one here if you'd like: http://stackoverflow.com/questions/1022732/setting-an-xslt-variable-as-a-javascript-variable — , Jun 20 '09 at 22:46

score 30 · Accepted Answer · answered Jun 20 '09 at 22:23

30

Reload the items using AJAX instead of reloading the whole page.

Get and set the scroll position using window.pageYOffset and window.scrollTo(0, y).

I'd store the position in the hash of the URL:

// after loading the document, scroll to the right position
// maybe location.hash has to be converted to a number first
$(document).ready(function() {
    window.scrollTo(0, location.hash);
});

// I'm not quite sure if reload() does preserve the hash tag.
location.hash = window.pageYOffset;
location.reload();

answered Jun 20 '09 at 22:23

Georg Schölly

124,188
49
220
267

2

if this list is on a scrollable DIV how can I make DIV's scrollbar to scroll to desired position? – ante.sabo Jun 21 '09 at 10:48
@asabo: I'm not quite sure, but I don't think this is possible. You'd have to create a custom scroll view. (Which is not that hard.) – Georg Schölly Jun 22 '09 at 16:15
2

For a cross-browser function to get the page offset, try this: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow Scroll down to the getScrollXY() function. – Shawn Grigson Feb 02 '11 at 15:03
6

To have a more cross-browser function and if you are already using jQuery, use `$(window).scrollTop()` and `$(window).scrollLeft()` to get the current scrolled position of the window. – Marc Oct 06 '11 at 02:03

score 2 · Answer 2 · answered Jun 20 '09 at 22:29

2

As gs said add the elements via an ajax call instead of of reloading the page.

If you don't want to to use the jQuery.ScrollTo plugin. Which supports everything related to scrolling you could ever have dreamed about

answered Jun 20 '09 at 22:29

jitter

53,475
11
111
124

score 2 · Answer 3 · answered Oct 12 '12 at 04:45

I think what you need is just to pass an HTML anchor at the end of your link. The browser will scroll automatically to the element right next to the matched anchor. Example:

<a href="page2.html#myanchor">Next page</a>

At some point in the middle of page2:

<a name="myanchor">My item N</a>

score 1 · Answer 4 · answered Jun 16 '11 at 06:54

according to @Shawn Grigson's link, pageYOffset is not supported the same across all browsers.

a jQuery solution (hopefully truly cross-browser compatible, though i haven't yet tested it) for getting and setting an element's vertical scroll is scrollTop().

Get current scroll position and pass it as a variable with a link?

4 Answers4

Linked