Set anchor link without scrollTo animation with ScrollTrigger not working

[italoborges]

Hello everyone! Happy Sunday!

I'm trying to create an anchor link to lead the user to the contact section without having to go through all the other ones.

Since I'm using ScrollTrigger and also the helper function smoothScroll, there is a conflict between something that I can't figure out.

 

You can see that when the user gets to the contact section by the anchor link, the blue box is not on its correct state. 

How can I set a scroll position without animation ( straight to the contact section) but respecting my "scrubs"?

 

Thank you!

See the Pen Jjrxqyd by italoborges (@italoborges) on CodePen

[OSUblake]

The browser doesn't know about the smooth scrolling, so that will mess up where it thinks the contact part is. You'll have to calculate that yourself kind of like this.

 

See the Pen mdBoVKy by GreenSock (@GreenSock) on CodePen

 

[italoborges]

Thanks as always @OSUblake

 

With this approach, when I click in the anchor, it takes me to the section scrolling there, I would like the same effect but without the scrolling animation.  In my case I could perform that but the scrub doesn't seem to be update after going to the anchor link. 

 

I understood that I'm not positioning the window, but the viewport, right?

[italoborges]

I think I got it.

 

Instead of using the same ScrollTrigger as the smoothScroll, I created a new one for the contact section so I could manipulate it without the easing to get to the contact section.

 

const viewport = document.getElementById('viewport')
const sectionContact = document.getElementById('section-contact')
const btnContact = document.getElementById('btn-contact')

const stContact = ScrollTrigger.create({
  trigger: sectionContact,
  start: 'top bottom',
  end: 'bottom top',
  scrub: true,
  toggleClass: 'content-active',
})

btnContact.onclick = function (e) {
  e.preventDefault()
  const contactPosTop = Math.round(sectionContact.getBoundingClientRect().top)
  const viewportPosTop = Math.round(viewport.getBoundingClientRect().top)

  stContact.scroll(Math.abs(viewportPosTop - contactPosTop))
}

🥳