I'd like a page refresh to resume the page from the last scroll position before the refresh was pressed.
I'm using AngularJS and something peculiar is happening because when I refresh it first goes to the top of the page, then as soon as I scroll it will resume from the last scroll position before I hit refresh.
Very odd behavior, no?
How about providing a route like /app/:currentScrollTop
and then you can based on that parameter to scroll your view to the desired position.
Related
I'm using ui-router.
A similar question has been asked on this a Number of times... But the solutions seem to be all over the place and either the question doesn't address a simple idea or the answer doesn't, either.
Here's my simple ui-view setup:
A master view has the navbar and footer
Children of the master view/route that can be activated include the Homepage, About Us page and Learn More page
Pretty simple...
By default, if the homepage is activated, and scrolled down 500px, and I click on a route to the "About Us" page, that page will be scrolled down 500px. Obviously this is not desired.
So... Everyone's solution is some variation of setting document.scrollTop(0) on every state change success. This is atrocious.
While it fixes the issue at hand, it clobbers the browser back button behavior. Here are some problems:
When a refresh is called, the standard browser behavior of refreshing to the current location is ruined
When the back button is clicked, the homepage would then scroll all the way to the top
If the back and forward button were clicked, I wouldn't retain the correct spot on the next page, either
This whole document.scrollTop(0) or any variation of it, really doesn't seem to be viable and I've yet to see a clear solution to this.
Having a contact list build with Polymer's neon-animated-pages (Plnkr), the navigation through them is clear. But using a mobile device for example, when hitting the back button, the complete page dissapears i.e. it 1) exits the application or 2) goes back to the previous page instead of the previous neon-animated-page.
Any change to achieve this behaviour to be navigating like a normal page?
Thanks in advance!
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?
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 am trying to use $anchorScroll and $location.hash() to scroll to a div. I have a bottom on the top of the page. When I click the bottom, I want the page to scroll down to the bottom of the page where I have a <div id="target">.
For some reason, the first time I click the button, my page doesn't scroll. If a click a second time, the page does scroll. And afterwards the scrolling works fine. This weird behavior can be reproduced if I refresh my page.
I have this code in my controller:
$scope.scrolldown = function() {
$location.hash('target');
$anchorScroll();
}
I know that the $location.hash('target') line is supposed to append a hash value to the end of my URL.
Here's the URL when my page first got loaded:
http://run.plnkr.co/iqvdGjdeCP4idP4D/
After I clicked my button for the 1st time, it becomes:
http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target
which was not right (and the page was not scrolling properly).
After I clicked my button for the 2nd time, it becomes:
http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target#target
From this point on the page started to scroll properly, but the URL still looks very strange to me -- why would I want two hash values?
I want to know why the button only works after second click and how to correct it.
Update
I added routing to my code and the scroll is working fine now.
Here's my plunker demo with routing.
Take a look at this question, which contains a possible solution for you:
Supress reloading of ui-router based view on query parameter change
It works the second time you click the button because the hash doesn't change (and so the route doesn't reload). Notice the page flickering when you click it the first time? That's an indicator that the whole DOM has been re-rendered.
I have a web page done in AngularJS. I got four tabs. In my first tab there are a set of images which I can select,
When i switch between tabs,and come back to the first page, the page gets refreshed and I loose what ever I have done in my 1st tab. Like tab gets refreshed like it was loaded again.In this 1st tab I got some drill downs ass well. That also gets reset.
How can I avoid this.