Jump to content
Search Community

Horizontal website menu: scrollTo section on click

lauxpaux test
Moderator Tag

Recommended Posts

Hello, I'm pretty new at this and this is my first post so I'll try to be as clear as possible but bare with me please.

 

The codepen attached is essentially what I want to do for this site in terms of functionality. I'm struggling with the menu portion because it is a horizontal website and I can't just add the ids to the href. I tried using scrollTo but I haven't had any luck so I'm wondering if someone can help me. 

 

The idea is to have the menu flow throughout all the sections in a sticky-like position. When you click on one of the menu links it sends you to the corresponding section regardless of where you are on the website. Right now I'm thinking scrollTo but I'm open to other methods/animations as long as it takes you to the particular sections which is what I can't figure out. I'd appreciate any help. Thanks!

See the Pen bGpLrdZ by lauxpaux (@lauxpaux) on CodePen

Link to comment
Share on other sites

Hey lauxpaux and welcome to the GreenSock forums.

 

Normally in situations like this you can just calculate the y offset of the container of your sections and add that to the x offset of each section. Then scrollTo that position. Something along the lines of this:

const sectionContainer = document.querySelector(".section-container");
const navLinks = gsap.utils.toArray(".nav-link a");
navLinks.forEach(link => {
  link.addEventListener("click", e => {
    // Prevent the default behavior
    e.preventDefault();

    // Get the element
    const section = document.querySelector(link.getAttribute("href"));
    // Get the scroll position
    const pos = sectionContainer.offsetTop + section.offsetLeft;
    // Scroll to it
    gsap.to(window, {scrollTo: pos});
  });
});

However if you try that in your project, it won't work correctly because your tween that moves things horizontally is not a one-for-one animation (meaning it moves further than it actually scrolls). Is that intentional? If it isn't you can just change your animation to work one-for-one and the above should work. If it is intentional then the solution becomes a bit more complex. Let me know what you need.

 

Side note: I recommend that you use the <nav> element for your .nav-link container.

Link to comment
Share on other sites

59 minutes ago, ZachSaucier said:

Hey lauxpaux and welcome to the GreenSock forums.

 

Normally in situations like this you can just calculate the y offset of the container of your sections and add that to the x offset of each section. Then scrollTo that position. Something along the lines of this:


const sectionContainer = document.querySelector(".section-container");
const navLinks = gsap.utils.toArray(".nav-link a");
navLinks.forEach(link => {
  link.addEventListener("click", e => {
    // Prevent the default behavior
    e.preventDefault();

    // Get the element
    const section = document.querySelector(link.getAttribute("href"));
    // Get the scroll position
    const pos = sectionContainer.offsetTop + section.offsetLeft;
    // Scroll to it
    gsap.to(window, {scrollTo: pos});
  });
});

However if you try that in your project, it won't work correctly because your tween that moves things horizontally is not a one-for-one animation (meaning it moves further than it actually scrolls). Is that intentional? If it isn't you can just change your animation to work one-for-one and the above should work. If it is intentional then the solution becomes a bit more complex. Let me know what you need.

 

Side note: I recommend that you use the <nav> element for your .nav-link container.

Hi, 

 

Thank you so much for your response. I'm not sure what you mean by "it moves further than it actually scrolls. Can you clarify that for me? 

 

Thanks!

Link to comment
Share on other sites

I just mean the amount that you scroll doesn't equal the normal scroll amount (say that same distance was vertical instead). A couple things are throwing it off:

  1. You're translating the horizontal section by xPercent: -135 * (sections.length - 1), which isn't 100% of the container's width. It should be something like xPercent: -100, x: innerWidth.
  2. Your start position is the default ("top bottom") but that position is before the start one, so it is throwing off the distance.

Maybe it'd be better to start from this:

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

Link to comment
Share on other sites

Hi there, 

 

Apologies to have disappeared I had a project for school that required all of my attention but now I'm back trying to figure this out. I don't understand the functionality  of in the code for the nav bar you provided. Do you mind explaining how it works? 

 

I attached the codepen of the codes combined. My goal is to have nine sections altogether counting the landing page and to scroll or fade into the corresponding section once the nav link is clicked. 

See the Pen ZEWjKXQ by lauxpaux (@lauxpaux) on CodePen

Link to comment
Share on other sites

13 minutes ago, lauxpaux said:

Do you mind explaining how it works? 

I think the comments do that. Is there a particular aspect that you're not understanding?

 

As for your demo, the biggest issue is that you aren't loading ScrollToPlugin but you're attempting to use it. You should also size the sections and the container to what you need them to be and adjust the tween of the container accordingly. 

 

Here's another similar demo. You'll have to adjust it since you don't want the content to layer and your sections are of a different width:

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

Link to comment
Share on other sites

  • 5 months later...
  • 1 year later...

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.
×
×
  • Create New...