CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
mahan
mahan

Reputation: 15035

How to scroll back to an element wherever it is when route changes?

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.

Upvotes: 1

Views: 72

Answers (1)

stianlp
stianlp

Reputation: 1019

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.

Upvotes: 1

Related Questions