[RESOLVED] Retain vertical scroll when going back to search results

iltdev

I have a form that when submitted displays the results in rows (search.php)
Each row has a link to more information (detail.php).

I have the parameters in a session so that I can get back to search.php from detail.php with parameter, pagination etc intact.

However, I need to find a way to put the scroll back to here it was when the user clicked on the 1st link (in detail.php).
The reason for this is they may loose where they were when scrolling through the results.

I know the scroll position can be accessed/set with jquery, but I'm not sure passing client information to php is possible. The scroll position needs to be retrieved when the user clicks on the link to detail.php and ideally put into the session, but I'm not sure how?

johanafm

You need to keep track of where the scrollbar is, which means an onscroll event and store window.scrollY. Add this to your querystring or form data. For the target page, add an onload event to the body element and call window.scroll(0, $scrollY)

iltdev

Thanks for the reply.

I understand the logic, but I'm not sure how it would work in my setup.

The form and the results are on the same page. So if I passed the scroll position through the form when the form is submitted, the scroll value would always be 0 - because at that moment the user is at the top of the page (where the search form resides).

When results/rows are returned (still on results.php) underneath the form, the user scrolls down and clicks on a link 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 - Its just a link details.php with the id appended so that details.php can pull back the correct data.

Let me know if you need more info, or id I'm not explaining very clearly 😉

johanafm

Ah, I thought you wanted the user to get back to an arbitrary position on the page. If you want to take them to a specific place, every time you can set the id attribute of the element you want to scroll into view, and append #id_value to the URI. Or create a link on the page

<a href="#id_value">Scroll down</a>

Or use javascript

var el = document.getElementById('id_value');
el.scrollIntoView(el);

But, using javascript if you don't have to seems silly. So if I understood you correctly this time around, go with document fragment as described above. However, if you do need to scroll to an arbitrary position, you can use either element.scrollIntoView or window.scroll, depending on how you implement your logic.
The link

<script>
	document.write('<a href="javascript:void(0);" onclick="document.location= \'http://example.com/file.php?scrollY=\'+window.scrollY">Reload and scroll</a>');
</script>
<noscript>
	<a href="http://example.com/file.php">Reload</a>
</noscript>

if (isset($_GET['scrollY']))
	$bodyOnload = ' onload="window.scroll(0, '. $_GET['scrollY'] .')"';
else
	$bodyOnload = '';

// ...

echo '<body'.$bodyOnload.'>';

Do note that window.scrollY may not exist in all browsers. The other version is window.offsetY iirc. You should definitely test it anyway.

iltdev

Thanks for the reply.
I've managed to do it with anchor name/id. When the link to detail.php is generated, I've added name="hash123" id="hash123" to the url. Then when coming back to the results added #hash123 to the end or the link url.

Seems to work well 🙂