Last year, I posted a rather detailed and lengthy script that I had mashed together to make a pretty passable infinite scroll system. I had to take a break on development, but now that I'm back in it I've hit a conundrum and I'm not sure which option would be better.
This is on the page where I list the classified ads. The user first selects a category or category / subcategory, which could be up to about 2000 results. The selected page shows the first 20 results.
As they scroll down and get to the bottom of the list, I load the next 20 results by sending an Ajax fragment for the same page, but with a GET variable of s=20 (which means "starting point = 20"). Then as they continue to scroll and get to the bottom again, I send s=40. And so on, until they get to the end of the results.
Now, here's where I hit the conundrum:
1. I can have the script update the address bar with the new variable, eg:
The pro is that when the user clicks to view a listing and then clicks on back, their browser loads the page with the GET variable so they won't accidentally get pushed to the top of the list and have to start over... you can imagine how annoying it would be to be halfway down a list of 2000 items, and then have to start over!
The con is that they click to go on through the site and then try to return back, there's no way to scroll back up the list to see older results. I could add a button to the top when there's an s variable that says "show previous results" or something, but I'm not sure that it wouldn't be confusing to a lot of my users (many of whom are older or very computer illiterate).
2. I can have the script to NOT update the address bar, so that it always stays the same as the user scrolls.
The pro here is that they'll always load from the top (eg, s=0), so the problem with wanting to see older results is eliminated.
But, obviously, the con is that it brings back the problem of potentially having to scroll through the entire page to find where you were before.
Other potential solutions include:
3. When they click to view a listing, instead of linking directly to the listing I could make it run a function to set a cookie or SessionStorage with the ID of that item. Then when they come back, if s=0 then I could make it load results in MySQL until it gets to that ID and then drop down to it with an anchor. The coding would be a little complicated, but it could be done.
4. When they click to view a listing, instead of redirecting to a second page I could open it as an innerHTML on the current page. That would make it load faster (a great advantage!), and closing it would keep them exactly where they were, but with some negative side effects:
a. it would be confusing on mobile, where the screen isn't really big enough to make it obvious that they're on the same page; and
b. it's harder to copy or share the address, since the direct link for the listing wouldn't be in the address bar.
The easiest solution is #2, which would also be the most understandable to everyone. But it doesn't solve a common complaint that I've had over the years, so I'm not in love with it. After typing this all out, I'm kind of thinking about #2 (not changing the address bar), and then writing the script that I described in #3.
What would you guys and gals suggest?