Jump to content
GreenSock

italoborges

Set anchor link without scrollTo animation with ScrollTrigger not working

Recommended Posts

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

🥳

  • Like 1
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.
×