Horizontal Scrolling Page with Anchors

[jadealombro]

Hey guys!

 

I am trying to work on a page that scrolls horizontally. Each section on the page has an indefinite width that depends on the content.

 

I am able to make the horizontal scroll work. I looked up some codes on how to get a menu section link on specific sections (including inner sections) through IDs but for some reason, the calculations for the scroll seem off.

 

I was hoping any of you can please point me in the right direction to get the links to work correctly where once a link item is clicked, the page should land on the right section of the page.

 

Thanks in advance.

See the Pen mdKamdK by jadebermas (@jadebermas) on CodePen

[Cassie]

Hi there!

 

This demo from this thread should be what you're after - 

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

 

[jadealombro]

Hi @Cassie!

 

Thanks a lot this helps! I was able to make it work but do you know which part of the code should I alter if I want to add links that scroll to div based on the ID?

[mvaneijgen]

@jadealombro you should change the HTML just create a new section and a new item in the <nav> and the code will dynamically update. 

 

See the Pen mdGbqaa?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[jadealombro]

@mvaneijgen sorry if I wasn't clear but what I meant is what if I want to explicitly link to section three through an ID that is assigned to it?

 

For example, the third section will have the wrapper code:

 

  <section id="third" class="section section--small vh-100 flex-shrink-0 d-flex justify-content-center align-items-center">
    Part Three
  </section>

And I have a link on the page that's like:

 

<a class="scrollto" href="#third-section">Third Section</a>

Hope this clarifies it.

 

Thank you.

 

 

 

[Rodrigo]

Hi,

 

Maybe this example is what you're looking for:

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

 

Hopefully this helps.

Happy Tweening!