malfunction smooth scroll, doesn't work on mobile

[Anderw]

hi there, i can't get smooth scroll to work on mobile, once i click on the menu it doesn't show me the section i selected! it's a one page scroll! thanks in advance for the help🙂

See the Pen VwGpGXG by Andrewwolf (@Andrewwolf) on CodePen

[Cassie]

Hi there -  you had a lot of errors here!

The code inside the smooth scroll function wasn't firing, you weren't including GSAP or scrollTo plugin or jQuery at all. You were using old GSAP syntax and there were closing tags missing in your links and for your scroll container.

I've adjusted it for you to give you a better starting point.

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

For future reference, we're more than happy to help with GSAP related questions, but please make sure the demo provided is thoroughly checked for other issues. console.log() is your friend when debugging!

[Anderw]

I apologize for all the mistakes I'll try to fix them! I'm using wordrpress and in transferring to codpen I omitted some details!😅

[Anderw]

I think integrated everything correctly but I have the same problem😢

See the Pen yLxMWeo by Andrewwolf (@Andrewwolf) on CodePen

[Rodrigo]

Hi,

 

Once again you provided a non-working example. Your jquery ready function is not working:

2 hours ago, Cassie said:

console.log() is your friend when debugging!

Just remove all of that and this works:

const links = gsap.utils.toArray(".header__menu a");

links.forEach((link) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    const href = e.target.getAttribute("href");
    const target = href === "#" ? 0 : href;
    gsap.to(window, {
      duration: 1,
      ease: "power3.out",
      scrollTo: target,
    })
  });
});

Hopefully this helps.

Happy Tweening!

[Anderw]

hi Rodrigo, thanks for your help, it works perfectly👍  but in the mobile version, when I click on an item, it scrolls correctly but the fixed menu remains, without displaying the selected section!

See the Pen yLxMWeo by Andrewwolf (@Andrewwolf) on CodePen

[Rodrigo]

Hi,

 

This is just a JS logic issue, not a GSAP related problem. This seems to solve it:

let hamburger = document.querySelector(".header__hamburger");
let isOpen = false;
const menuClickHandler = () => {
  document.body.classList.toggle("menu-open");
  isOpen = !isOpen;
};
hamburger.addEventListener("click", menuClickHandler);


const links = gsap.utils.toArray(".header__menu a");

links.forEach((link) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    isOpen && menuClickHandler();
    const href = e.target.getAttribute("href");
    const target = href === "#" ? 0 : href;
    gsap.to(window, {
      duration: 1,
      ease: "power3.out",
      scrollTo: target,
    })
  });
});

Happy Tweening!

[Anderw]

I don't know how to thank you, I've been trying to solve this problem for days!😅 Thank you very much for your availability Rodrigo👍😃