Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
markilfin

onepage site with smooth scroll and history.js

Recommended Posts

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!

Link to post
Share on other sites

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 ;) 

  • Like 1
Link to post
Share on other sites

:) 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 

Link to post
Share on other sites

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!

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×