Pixizz85 Posted November 26, 2021 Share Posted November 26, 2021 Hello everyone This is my first post on this forum. I have been using Gsap for a few months and I have some notions in javascript (in the process of learning). I have already integrated gsap on several sites but here is my problem. I successfully add a smoothscroll on my new project by following this example : See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen but I can't seem to get the anchor links to work properly. For the anchors in the page I succeeded thanks to the ScrollTo plugin but it does not work for the anchored links to another page section. My site is a local wordpress so to see the problem with the anchor link to another page, I quickly code an example here which uses my javascript code : https://dev.station-w.fr/gsap/ The problem is when I click in the footer on an anchored link to the service page, we arrive on the page but the scroll is broken. We cannot go top to the header and a large white space is present under the footer. To easily see the code I also put a codepen version. Thank you in advance for the help. See the Pen yLompgv by nero85 (@nero85) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 26, 2021 Share Posted November 26, 2021 Welcome to the forums @Pixizz85 It's hard to troubleshoot a live site, and there might not a way to do this use hash anchors as the browser doesn't know we are messing with the scrolling. I would probably try it using query strings in the url, kind of like this. <a href="https://dev.station-w.fr/gsap/services.html?anchor=%23service1">Go to service 1</a> <a href="https://dev.station-w.fr/gsap/services.html?anchor=%23service2">Go to service 2</a> <a href="https://dev.station-w.fr/gsap/services.html?anchor=%23service3">Go to service 3</a> And then after you create your smooth scroll and any other related triggers, see if there is a param for an anchor to scroll to. let urlSearchParams = new URLSearchParams(window.location.search); let anchor = urlSearchParams.get("anchor"); if (anchor) { gsap.to(window, { scrollTo: anchor }); } 1 Link to comment Share on other sites More sharing options...
Pixizz85 Posted November 26, 2021 Author Share Posted November 26, 2021 Thank you very much @OSUblake i'm testing this and come back next week if needed. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now