sweet-scroll | TypeScript Friendly , dependency-free smooth scroll library | Frontend Framework library

What's the best approach for adding an onclick event to trigger a scroll for an element that has horizontal overflow?

Premise: I'd like to add an anchor nav that allows a user to jump to specific milestones in a timeline UI. I'm working from this example EnvatoTuts. By grabbing the first instance of a year I'm attaching an ID to the milestone and building out an anchor nav.

Things I've tried: It seems most information is in regards to vertically scrolling the html or body, where as I'm looking to only scroll horizontally within div.

• I tried using smooth scroll, but because the action is horizontal the browser 'jumps' down to the anchor
• I tried using position:fixed on the anchor nav, but this takes the nav out of the parent container, attaching it to the viewport
• I tried using translateZ(0) on the container element (.timeline), but position:fixed does not actually work on the anchor nav because the position essentially reverts back to relative
• I tried using a plugin for scrolling (sweet-scroll), but couldn't figure out how to trigger scrolling with the nav outside of the target container

Here's the javascript I've used to set an ID and build the anchor nav: