There is a page with thumbnails. At the bottom there is have a "Show more" button that loads more thumbnails. A user can click on a thumbnail and re-direct the application into details. When the user clicks browser's "back" I would like him to land in the same position as before. How to achieve this without complex routing?
Asked
Active
Viewed 117 times
1 Answers
0
You can achieve something like this using angular-bootstrap-lightbox and the ui-bootstrap pagination. Both are Angular and use common resources
EDIT:
What you're looking for is something along the lines of scroll-sneak, you want to save the scroll position when you redirect to another page and load the last position when you redirect back.
since I could not find any angular directive to do so, you can either
- get one and wrap it around a directive, most of them use jQuery
- you can make your own.
for example, you can use js to define a queue array and store it in localStorage/sessionStorage, when you redirect "push" the current page location to the queue, when you redirect back, "pop" that last stored position.
Maintain Scroll Position of large HTML page when client returns
-
I don't want to open the details page within the lightbox. I want it to remain a standalone page. – alex May 12 '15 at 12:08
-
you mean just remembering the scroll position you were before you entered details? – svarog May 12 '15 at 12:20
-
Exactly, but, with the "sub-page" position within the page (so basically, how many times the user clicked "Show more"). – alex May 12 '15 at 14:29
-
Try scrolling down on Facebook and wait for example five times for something to load. Then click on a random date of a post (to go to the details page). Then go back. It automatically loads so many posts that you get to your previous position. – alex May 12 '15 at 14:32