1

I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:

  1. Update route and page reloads
  2. Get data(list of objects) from server.
  3. Display the data below the <a> tag
  4. Hide data related to an another <a>tag.

The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.

How to scroll back to the <a> tag you clicked on when route changes and page reloads?

If you answer, please no jQuery.

Thanks in advance.

Community
  • 1
  • 1
mahan
  • 12,366
  • 5
  • 48
  • 83
  • https://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript Would one of these solutions help? :) – Alice Yu Aug 03 '17 at 19:18

1 Answers1

1

So what's inside your tables? Is it images?

And the "data from the server", is it data, like data from an api request? Or is it a new webpage?

If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.

The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.

You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.

stianlp
  • 999
  • 9
  • 19
  • It is data from an `API` request. It is an option to not reload the page but not the first choice. – mahan Aug 04 '17 at 07:26
  • You could write a script that checks if the element is in the correct position and scrolls into the correct position if not. You (normally) don't know when the page is done rendering, so the script has to check multiple times (perhaps a recursive function that's being called every s second). You also have to stop that script at some point because as soon as the user starts to scroll, we don't want a script scrolling back. If you have images on the page, it is possible to check if they are finished loading: https://stackoverflow.com/questions/20613984/jquery-or-javascript-check-if-image-loaded – stianlp Aug 04 '17 at 09:20