Jump to content
Search Community

onepage site with smooth scroll and history.js

markilfin test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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.
  • Create New...