Smoothscroll and scroll to section when coming from other page link(hash)

[Pixizz85]

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

[OSUblake]

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

 

[Pixizz85]

Thank you very much @OSUblake i'm testing this and come back next week if needed.