scrollTo not working

[unni]

i have five sections and when i click on the nth section button the page should scroll to that section . The each sections top should be at the top of the browser's top. if anyone knows please help.

 

sectionOneBtn.addEventListener("click", (e) => {
  console.log("button clicked");
  gsap.to(window, { scrollTo: ".section1", duration: 1 });
});

 

See the Pen PoVwOvN by unni-krishnan-the-vuer (@unni-krishnan-the-vuer) on CodePen

[GreenSock]

A few problems: 

1. You forgot to load ScrollToPlugin
2. Since you've got pinning ScrollTriggers, that throws off where the scroll would hit those elements so you should use the helper function that's ScrollTrigger-sensitive: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/
3. You're using a lot of unnecessary/redundant code. You could simplify it quite a bit...

Is this more like what you wanted?:

See the Pen dyaGKWo?editors=1010 by GreenSock (@GreenSock) on CodePen

[unni]

9 hours ago, unni said:

i have five sections and when i click on the nth section button the page should scroll to that section . The each sections top should be at the top of the browser's top. if anyone knows please help.

 

sectionOneBtn.addEventListener("click", (e) => {
  console.log("button clicked");
  gsap.to(window, { scrollTo: ".section1", duration: 1 });
});

 

is there any other ways different than this ?

[GreenSock]

29 minutes ago, unni said:

is there any other ways different than this ?

I'm confused - why are you asking for a different way? Is there an issue with the solution provided? If so, could you please elaborate on what you're struggling with? 

[unni]

i am sorry it actually  works.
thanks for the help.

 

const toAbout = () => {

    const aboutPage = document.getElementById("page2");

    gsap.to(window, { scrollTo: aboutPage.offsetHeight * 2, scrollBehavior: "smooth" });

  };

 

  const toPortfolio = () => {

    const portfolioPage = document.getElementById("page3");

    gsap.to(window, { scrollTo: portfolioPage.offsetHeight * 4, scrollBehavior: "smooth" });

  };

 

  const toMySkills = () => {

    const skillPage = document.getElementById("page4");

    gsap.to(window, { scrollTo: skillPage.offsetHeight * 6, scrollBehavior: "smooth" });

  };

 

  const toContact = () => {

    const contactPage = document.getElementById("page5");

    gsap.to(window, { scrollTo: contactPage.offsetHeight * 8, scrollBehavior: "smooth" });

  };

[GreenSock]

I definitely wouldn't recommend setting scrollBehavior: "smooth" - that messes up how the browser scrolls, it can cause issues with ScrollTrigger, and it's totally unnecessary since you're already creating a smoothed scrolling effect by tweening the scroll position. That's super wasteful and bad for performance. If you want it to take longer, just set a bigger duration on your tween(s).