Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts

    JQuery - Retain Vertical Scroll Position

    Hi,

    I have a form that when submitted returns results in rows.
    Each row has a link to a details.php page, based on the id of the row.
    The form parameters are stored in a session so that the user can get back to the results.php page with their search results intact.

    I'm planning to use JQuery's ScrollTop() to get the current scroll position so that when I go from my details.php page, back to results.php, the user is taken back to where they left off.

    However, I need to get the ScrollTop() at the moment the link to details.php.

    Does anyone know how I can acheive this?
    Last edited by htcilt; 02-17-2010 at 02:01 PM.

  • #2
    New Coder
    Join Date
    Nov 2009
    Location
    Tampa, Florida. US
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    could you post a snippet of what the resulting html looks like (when the search results come back)?

    I would assume by your first post you may do something similar to...
    Code:
    $("a").click(function(){
          $("body").scrollTop();
    });
    note "a" would need to be a unique selector that would represent only the detail links (not every link on the page...)

    So if they returned in a div with an id of "details" then it would be "#details a"...

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I'm not in the office right now so I cant get to my files, but to give you an idea of the output html by search.php:

    Code:
    <html>
    <head</head>
    <body>
    <!--SEARCH FORM-->
    <form id="search" name="search" method="get" action="">
      <label>
        <input type="text" name="keyword" id="keyword" />
      </label>
    </form>
    
    <!--EACH ROW RETURNED-->
    <a href="/detail.php?ID=173">Title for 173 here</a>
    <a href="/detail.php?ID=924">Title for 924 here</a>
    <a href="/detail.php?ID=63">Title for 63 here</a>
    <a href="/detail.php?ID=21">Title for 21 here</a>
    <!--ETC ETC-->
    </body>
    </html>
    Most examples I've seen online have a function to get the vertical scroll position and assign this to a textfield value. This is then called onsubmit so the scroll position gets sent as a parameter which can then be picked up by php.

    The problem here is when results/rows are returned (still on results.php) underneath the form, the user scrolls down and clicks on a link (generated by php) for more info. Its at this point that the scroll position needs to be captured - but I cant pass it as a parameter in the querystring because the form isn't submitted again - we already have our results. The link just points to details.php with the id appended so that details.php can pull back the correct data.

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Looking at ebay for inspiration, it looks like they do it with anchors.

    Each row's generated href has the item in the querystring, but also a hash parameter. An anchor with the same hash name is also in there - just before the row.

    So when clicked the user is taken to the item details page and the anchor name is taken across too.
    Then on the details page, the link back has the hash appended to go back to the anchor in results.php

    So my generated link on search.php needs to be
    Code:
    <a name="173"><a href="/detail.php?ID=173">Title for 173 here</a>
    And the link generated on detail.php needs to be (parameters retrieved from session)
    Code:
    <a href="/results.php?keyword=hello#173">Back to Search results</a>
    I think this might actually work!

  • #5
    New Coder
    Join Date
    Nov 2009
    Location
    Tampa, Florida. US
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    So is there any reason in theory that you couldn;t just make that all one anchor link instead of two?

    Code:
    <a href="/detail.php?ID=173" name="173">Title for 173 here</a>
    and when you link back do as you were saying, just add a hash to link to the link you left from...

    However, I looked at ebay, and they seem to "know" where I was but there's no sort of hash reference in the URL... I don't really know anything about sessions and cookies though...

    I think that setting the link name and referencing it is probably the better way to go than scrollTop. (unless you run into a situation that two display results share the same id reference (therefore the same hash name.)

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank blue642,
    Yes, I never thought of putting the name in the same anchor.

    For the ebay example, if you do a search (for anything) then rollover the item name, have a look at the url and it should end in e.g. "item230562bbae". This code is also set as the named anchor.
    Clicking on the item goes to the details page. The 'back to search results' has '#item230562bbae' at the end of the url to go to the named anchor.

    Good old ebay, think of everything lol

  • #7
    New Coder
    Join Date
    Nov 2009
    Location
    Tampa, Florida. US
    Posts
    18
    Thanks
    5
    Thanked 1 Time in 1 Post
    Ah, I see now. Indeed that is some good usability design there.

    I thought of another reason the JavaScript scroll top isn't such a good idea, being in such a dynamic environment (with php) you back to results page may not have everything exactly the Same distance every time.

  • #8
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I've run into a problem with the solution.
    As its not really a JQuery problem anymore, I've opened another thread here:
    Retain vertical scroll when going back to search results

    Why are things never straightforward?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •