Fix back button when using the data-url feature

[robertpateii]

Hello again!

As we discussed on #17, here's the fix for the back button. Thanks for taking time with this!

Pseudo code:

1. Page loads. Chrome/Safari fire onpopstate event, Firefox doesn't.
2. User clicks a smooth scroll link, is scrolled to it, and the URL is updated.
3. User clicks back.
   • Browser removes the URL fragment that was added.
   • Browser fires onpopstate with a default event.
   • My code sees the event is the default event and sends the user to the top.

Other notes:

I updated your history.pushState so it creates events with unique info.

As before, clicking multiple smooth scroll links will update the URL fragment each time. Clicking back between them changes the URL and position to the previous fragment. So *onpopstate isn't needed in this case, even though it still fires.

Test cases

Test A:

1. load the page
2. click a smooth scroll link
3. click back

Page position should be at the top of the page.

Test B:

1. load page
2. click smooth scroll link
3. go to a different page or website
4. click back

Page position should be the same as when you left the smooth scroll page.

Test C:

1. load page
2. scroll down manually to a smooth scroll link and click it
3. click back

Page position should be at the top of the page. (Some may prefer that the position return to where you clicked the link. I understand, but that's hard and this behavior is still better than the back button doing nothing.)

Test D:

1. load page with a url fragment, i.e. #bazinga

Page should load with the #bazinga element at the top.

[cferdinandi]

@robertpateii - Sorry it's taken me so long for me to take a look at this! I finally got around to testing your implementation, and it definitely works as it's supposed.

However... with the help of some awesome people, version 2.14 finally fixed the bug that caused animation to stop several pixels short of the intended target.

Because of that, it's no longer necessary to use history.pushState. I can just use window.location.hash (which had previously caused a slight jumping behavior), which updates the browsers history and maintains back button behavior without needing to add a window.onpopstate. Not that there's anything invalid about that approach, but the more I can let browsers behave the way they want to without JavaScript, the better.

I really appreciate your work on this, and the data-url enhancement you added is a great feature that I've already seen a few people using on projects!

[cferdinandi]

I should have mentioned, back button behavior is now maintained as of version 2.17, which just got pushed out to GitHub. Thanks again!

[robertpateii]

Great! Yeah, location.hash is the way to go with #15 fixed. Thanks for the update.