I have the following scenario, a user is scrolled some wheres down a search page. They click on an item and after they are done viewing the item they hit the back button. The back button brings the user back to their exact location within the search page as it's suppose to. After a second, the page auto scrolls to the top of the search results. You can see this behavior in action cardaddy.com/forsale
I've spent a couple hours trying to figure this out with no success. I'm not aware of any js causing this issue either. Please feel free to take a look. Any suggestions would be great since this is destroying my ux
I though maybe the forward from my root domain to www.domain.com with godaddy.com may of been the cause, so i changed that behavior around to use amazons name server eliminating the forwarding. I thought I repaired the issue as it seem repaired on the desktop, but it still seems to happen on mobile.
As far as I know, this behaviour depends on your browser.
The back button brings you to the last site you visited and loads this site new. So the effect to stay at the possition is caused by the browser engine.
1 way of doing it would be to save the location of the page and restore to that location when back button is clicked
on click : var position = $(window).scrollTop();
On back button : $(window).scrollTop(position);
Related
I have a very rudimentary SPA built in vanilla JS. There are two buttons that the user can use to navigate between pages, for example:
buttonProfile.addEventListener("click", function () {
window.history.pushState({}, "", "profile/");
var updatePage = new Event("update-page");
dispatchEvent(updatePage);
});
Somewhere in the app, I have an event listener that listens to update-page to refresh the content that needs to be refreshed (without ever reloading the page) based on the current URL. Everything works fine.
However, I noted two odd behaviours:
If the user starts on Page A and then moves to Page B, the user will need to go back twice (button on the browser) in order to go back to Page A.
If the user goes back from Page B to Page A, once they are back to Page A the "forward" button on the browser will become greyed out.
EDIT
In case it helps, I noted I have the same issue when I use other people's SPAs that have a similar implementation. See this simple demo for example: DEMO | CODE
Steps to reproduce:
Click on About, then Contact, then again About, then again Contact.
Now, if you press Back once you'll go back to About. However, if you press it again you'll stay on About. You'll have to press it again to move to Contact and once you do, the Forward button will be disabled.
EDIT 2
I just realize that both my site and the site I posted above work fine when I run my browser in Incognito. There must be some other problem with my Chrome (though I have no idea what).
Okay, I found it. It was the Matter official Chrome extension. Not sure what exactly caused the issue though.
I have a heavily interactive page that, while it does not use a form, does have objects that maintain state. This state is completely messed up when someone navigates away from the page and then comes back to it again with the back button. So, I'd like to be able to detect when someone uses the "back" button to navigate to my page, and have it reset the content at that point. How can I accomplish this?
I found one other question that addressed this issue, but it is very out-of-date (from 2011), doesn't mention anything about support for Chrome, and I'd rather not use JQuery if I don't have to (I'm not using it anywhere else at the moment).
I have a Backbone app, it uses Backbone.history.start({pushState: true}). I render pages based on URL change, back and forward buttons work just fine, views are rendered well.
There is a problem though, page scroll positions are't kept when you click back or forward button. It makes it feel very bad.
I thought I would keep an array of pages visited and I would store scroll position for each of them. Then I would listen if user click back/forward and I would load appropriate scroll position.
But.
I just found out I am unable to tell when user click a back or forward button. If I could, I would just read stored scroll position of previous page and apply it. What am I doing wrong?
You could store the scroll location as a part of the route, using something like:
router.navigate('/my/route/scroll/[my_scroll_location]', {replace: true});
so It won't add a new history point, but will modify the current one. this way, when you hit "back" it will go to the previous "page"/route, and then hitting "forward" have enough information to scroll to the right point.
I have designed a one-page homepage with lots of content, in which a contact form is implemented at the bottom (see http://neu.logopaedie-scheithauer.de/). Upon opening the page for the first time, most browsers (IE, FF, Safari) scroll down to the first field of the contact form, possibly due to an auto focus.
This undesired behaviour leads to a bad user experience, as the user expects to read the page from top to bottom. However, I can't figure out, how to stop it. Any ideas?
It is because of the runonload function, and just removing the code, will fix the issue. Let us know if it has fixed. Just remove this code from the file contactform.js:
runOnLoad(function(){
$("input#name").select().focus();
});
I want to clear session when browser window closed. But when i am trying to use window.unload event, it triggers also when back button clicked. How can i avoid it?. And clear session on window close.
The other posters are correct. There is a reason you see the following setup on 99% of sites.
Offer the users a logout button to close the session.
Otherwise time out the session after they have been inactive for 1+ hours depending on your paranoia level.
Unfortunately clearing the session on unload() is not a good way to do it. In fact that unload handler will even fire when they go to other pages on YOUR SITE. I highly doubt this is the approach you want to go with.
There is no way to do this that I know of. It would be a security issue if you were able to tell when someone is leaving your page for another or closing the browser.
As far as your page's security model is concerned once someone is off your page there's no telling what's happening anymore
The only way to know if someone has left your site is if... they stop loading pages.
You're best bet is to track a "Last Impression" time in the session in your server application. Update it to now every time they make a page request. If their Last Impression is ever more than, say, four hours old, you know they left for a while, so invalidate their session and start a new one for them.