How to scroll to certain

[ZenithLai]

Hi,

 

When I view entire website. Then I click navigation page, and choose (section 2), then it will land on section 3,

any solution to fix it?

 

Thanks

See the Pen VwPGPYv by zenithlai (@zenithlai) on CodePen

[ZenithLai]

any code is when I click navigation bar > click section 2 then force land on section 2? 

[Cassie]

It looks like you've fixed this - but I would reiterate what I said before - tidy up your HTML and layout a little - it'll make it easier to animate things afterwards!
 

 

[GreenSock]

If I understand your question correctly, the issue is that you've got stacked elements, thus when the browser goes to #Section02 it's at exactly the same spot as #Section03. Open Dev Tools and inspect the DOM and you'll see what I mean. 

 

So to work around that, you could record the scroll offsets when the page is scrolled all the way up (0) and then manually handle the scroll to those positions like this: 

const navLinks = gsap.utils.toArray(".wrap-nav a");

navLinks.forEach(el => {
  el.addEventListener("click", e => {
    e.preventDefault(); // don't jump there. We'll handle it with a tween
    gsap.to(window, {scrollTo: el.scrollPosition, duration: 0.3});
  });
});

// re-record on each refresh so that it's responsive (works afte screen resizes)
ScrollTrigger.addEventListener("refresh", () => {
  // make sure we're scrolled all the way up (0). We do this with a tween so that we can rewind it back to 0 after we're done measuring. It'll be invisible to the user because we immediately jumpo to the end anyway, then rewind to the start and kill. 
  const revertTween = gsap.to(window, {scrollTo: 0}).progress(1);
  navLinks.forEach(el => {
    el.scrollPosition = ScrollToPlugin.getOffset(el.getAttribute("href")).y;
  });
  revertTween.progress(0).kill();
});

 

Here's a fork:

See the Pen NWprdPM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[ZenithLai]

It is work! 😀

On 5/16/2021 at 4:21 AM, GreenSock said:

If I understand your question correctly, the issue is that you've got stacked elements, thus when the browser goes to #Section02 it's at exactly the same spot as #Section03. Open Dev Tools and inspect the DOM and you'll see what I mean. 

 

So to work around that, you could record the scroll offsets when the page is scrolled all the way up (0) and then manually handle the scroll to those positions like this: 

const navLinks = gsap.utils.toArray(".wrap-nav a");

navLinks.forEach(el => {
  el.addEventListener("click", e => {
    e.preventDefault(); // don't jump there. We'll handle it with a tween
    gsap.to(window, {scrollTo: el.scrollPosition, duration: 0.3});
  });
});

// re-record on each refresh so that it's responsive (works afte screen resizes)
ScrollTrigger.addEventListener("refresh", () => {
  // make sure we're scrolled all the way up (0). We do this with a tween so that we can rewind it back to 0 after we're done measuring. It'll be invisible to the user because we immediately jumpo to the end anyway, then rewind to the start and kill. 
  const revertTween = gsap.to(window, {scrollTo: 0}).progress(1);
  navLinks.forEach(el => {
    el.scrollPosition = ScrollToPlugin.getOffset(el.getAttribute("href")).y;
  });
  revertTween.progress(0).kill();
});

 

Here's a fork:

 

 

 

Does that help?