Anchor Tag slider issue

[mishink7]

hello, I am using an anchor tag that goes to the homepage to a specific section. When I click on this anchor tag from the homepage itself, it works correctly. When i use the anchor tag from another page, it scrolls past that section a bit.

I tested it out that when i comment out the flickity code that i am using for a slider, then my anchor tag works. This is the anchor tag code on another page, and this is the flickity code on the homepage. Is there something else I should be doing? I tried to change the window on load to document.ready but that did not make a difference. Anyone encounter something like this?

        <li class="nav-item"> <a id="contact-us-nav-link" class="nav-link single-line-link"
            href="index.html#contact-us">Contact Us</a>
        </li>

$(window).on("load", function () {
$(".flickity-container-banner").flickity({
'fade': true,
wrapAround: true,
friction: 0.35,
'autoPlay': 4000,
pauseAutoPlayOnHover: false,
// arrowShape: {
// x0: 30,
// x1: 50, y1: 50,
// x2: 55, y2: 45,
// x3: 40
// }
});
});