onepage site with smooth scroll and history.js

[markilfin]

I have onepage site and I use gsap for all animations there, incl. smooth scroll with anchor links, something like this 

See the Pen bxaHz by anon (@anon) on CodePen.

Now I want combine this smooth scroll functionality with history.js plugin https://github.com/browserstate/history.js/ , so that users had the opportunity to go back and forward through the site. But I failed to do that.

Here is what I have atm 

See the Pen jzymf by anon (@anon) on CodePen.

as you can see page jumps to the top when you click back or forward, and only then scrolls.

 

I would really appreciate any help.

 

Thank you very much!

[Chrysto]

See the Pen yjiCb by bassta (@bassta) on CodePen.

Here is my fork, basically I added TweenMax.fromTo(), setting current window scrollTop() as a starting position. Also, changed the code a little bit to reflect my style of coding  

[markilfin]

Thank you, Chrysto!

I think this will help me a lot.

[Chrysto]

Just one thing to keep in mind ( not related to GSAP really ) 

 

You will have to do some htaccess redirection ( for example going to site.com/themen to redirect to site.com/index.html#!themen ) , then to catch the url hash and to do some initial scrolling 

[lacam]

Hi Chrysto and markilfin,

 

Scrolling doesn't seem to work properly on firefox back/forward, but seem to work fine on other browsers? Chrysto's codepen demo has firefox 'blink' the page to the top of the section. Any ideas why this is happening?

 

I'm also trying to implement this and am curious to know. Thank you so much for the initial info!

[Jonathan]

I just tested

See the Pen yjiCb by bassta (@bassta) on CodePen.

in Firefox 30 and 31.. and it works as expected.. back and forward buttons..

 

Tested using Chrysto's full page link:

See the Pen yjiCb by bassta (@bassta) on CodePen.

[lacam]

I see. There must be something wrong with my local firefox client then. Thanks for the heads-up!