when I refresh a view on my website I would like it to take the user to the same position on the page, right now every time I refresh it takes the user back to the top.
It should always go to the top when you switch between different pages but for refresh/F5 on the same view it should not take you back to the top.
I tried a few other solutions to this problem on stackoverflow but nothing worked for me.
Related
I have a React website here: www.assertivesolutions.ca.
If you visit the site in Chrome and scroll down to the "What We Do" section and click on the "Our Services" button, you get taken to the Our Services page. Notice is starts further down on the page and scrolls up to the top. This is because, as an SPA, it doesn't really go to a different page; it stays on the same page and just changes the content. So if you're scrolled half way down the page before you click the button, it will still be half way down the page after you click the button. So I implemented a fix to scroll to the top in the componentDidMount() hook:
componentDidMount() {
window.scrollTo(0, 0);
}
However, if you try the same thing in Firefox, it does not work. It stays scrolled half way down the page.
So I can take two approaches to solving this:
Figure out how to get scrolling to work in Firefox.
Figure out a different way of making sure the Services page loads at the top other than using window.scrollTo(0,0).
I'm leaning towards 2) because I have to imagine there must be a way in SPA websites to accomplish what I want.
Does anyone know how I can accomplish either 1) or 2) (preferably 2).
We are using angular-material's md-tabs to display information to the user.
Up until now we used an on-demand approach by adding
ng-click=vm.getForExampleDataForTab1(),
ng-click=vm.getForExampleDataForTab2()
and so on for each md-tab. But this solution has a problem that the first tab is displayed with no data because it doesn't get clicked by the user. So we switched to md-on-select instead. And that did the trick, the first tab was getting data and all was fine. Apparently. We then discovered in Chrome's Dev tools that when moving to another page in the app, all the other tabs that were not selected (the user didn't click on them to view the data) were called.
Did anyone encounter such a behaviour? It only happens when we used md-on-select, not ng-click on the tabs.
Thanks a lot,
ashilon
I'm using angular-chart (http://jtblin.github.io/angular-chart.js/) to make a single page application with differents chart.
The page could be scrolled to see all charts.
I had a problem with the behaviour of the browser after data refreshing (using asynchronous call to restfull services): the page is scrolled up or down automatically, depending on the "last" response obtained from the services.
My aim is:
- if I am in the middle on the page, I want to stay on the middle of the page
- if I am in the top on the page, I want to stay on the top of the page
- if I am in the bottom on the page, I want to stay on the bottom of the page.
Can someone suggest me any solution to avoid this scrolling (to disable/ignore this scrolling)?
I'm using React with react-router v4 for routing in a SPA app.
From within a list page, when user taps on an item, we navigate to detail url which renders detail component.
From here, if I click back, route transitions to list page but list page itself is reloaded. So its scroll position, selection of an item (which opened the details page) is lost.
I have been struggling to think about how to approach this problem. One way I was thinking is to build all pages to open as model on top of another so base page context is always there and when user navigates back, I can start to close the modals revealing previous page in its exact state.
Not sure if that is a right approach.
You could store the current scroll position locally, then scroll back to it when your list page component is mounted.
These are jQuery answers, but the principle is the same:
Restoring page scroll position with jQuery
How can I retain the scroll position of a scrollable area when pressing back button?
I have a question that suppose, I have an Admin Dashboard page, on which I have given a list of users. clicking upon a particular user the details of corresponding user is shown on a different page (say on userDetails.jsp). Now I have a back button on userDetails page, Clicking of which I need to redirect admin to the last visited page that is Admin Dashboard page, I have one solution that I can "Reload" the previos page on clicking back button, but then I feel that there is the overhead of calling a server side API, retrieving all the data, Again redraw the whole admin dashboard page even when there is no change made in the userDetails[because it is read only page, modification is not allowed there]. Is there anyway that I can make user of cache or anything else so that I will not need to go to the server to fetch all the data again. I am using spring MVC, angularjs, Thank you.
On your button's click event add the following code:
$window.history.back();
make sure to use $window rather than window since you're using AngularJS