Skip to content
This repository has been archived by the owner on Apr 28, 2020. It is now read-only.

Update the URL bar with the target fragment #17

Closed
wants to merge 1 commit into from
Closed

Update the URL bar with the target fragment #17

wants to merge 1 commit into from

Conversation

robertpateii
Copy link

My goal was to maintain back button behavior. But as I've currently implemented this, it will look jerky at slow animation speeds. This is because the offset calculated by the script is different than what the browser window calculates when you change its location.

If I can find a fix for this, I'll be sure and share it.

This will look jerky at slow animation speeds. The offset calculated by
the script is different than what the browser window calculates when you
change its location.
@cferdinandi
Copy link
Owner

@robertpateii - Cool idea. One way to avoid the jerkiness would be use history.pushState instead of window.location.hash. It's not supported by some older browsers, so you'd need to feature test for it first, but it updates the URL and maintains back button behavior without actually changing the window location.

if (history.pushState) {
    history.pushState(null, null, '#' + anchor.id);
}

If I were adding it, I'd also want to include an opt-out data attribute (ex. data-history="false"), with a similar implementation as used by data-speed and data-easing. Thoughts?

cferdinandi pushed a commit that referenced this pull request Dec 31, 2013
@cferdinandi
Copy link
Owner

@robertpateii - Added this feature to version 2.10 using the implementation I suggested above. I chose to leave the URL intact by default, with a data-url="true" variable for updating URLs. This can be reversed in the script itself by changing the default values found on line 129:

smoothScroll(dataTarget, dataSpeed || 500, dataEasing || 'easeInOutCubic', dataURL || 'false');

Thanks for suggesting this feature. I've given you credit both in the script itself and on the documentation page. Happy New Year!

@robertpateii
Copy link
Author

thanks! I think it'll need one more tweak though. Currently the back button is still broken in two scenarios:

Initial page load:

  • Load the page.
  • Click a link.
  • Click back.
  • Note the URL changes but your position doesn't move.

When going to an external site:

  • Load the page.
  • Click a link.
  • Go to a different domain.
  • Click back.
  • Your position is at the top of the page.

Judging from the example for pushState on MDN, this is the intended behavior.

We'll have to handle this ourselves during the window.onpopstate event.

I've almost got it working, and will post back within the hour w/ a solution.

@cferdinandi
Copy link
Owner

Ahh good catch, Robert! I was thinking about this from a "sharing a link to a location" perspective. Looking forward to your fix! (The good news: I've eliminated the jank).

@robertpateii
Copy link
Author

Turns out there wasn't a problem when navigating to an external site (the second scenario). Hitting back from an external site ignores both the history and the URL fragment. It just puts you at whatever position you were at when you left. I was careful not to break that behavior.

I did fix the first scenario, though, I'll make a new pull request shortly. Thanks and happy new year!

robertpateii added a commit to robertpateii/smooth-scroll that referenced this pull request Dec 31, 2013
Load a page, click a smooth scroll link, and click back. Now you should
return to the top of the page. Previously, nothing would happen.

Details here: cferdinandi#17
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants