Malfunctioning jumping anchor tag

I'm building a new project with Flickity and I'm running into an issue with a jumping anchor tag I created on the homepage. The purpose of it is to jump to a specific section on the homepage when clicked. It's simply a font-awesome icon with some text beneath it, nothing else.

However, despite all 3 sections being identical, the anchor tag only appears on the first section. What's more, I have it programmed to jump to the next section (1 > 2 > 3), but it only wants to jump to the last section when clicked.

I've pasted the code below, but you'll get a better idea of how it currently works by watching this screen recording: https://i.sstatic.net/Vvl28.jpg

// ---------------------------------------- UNIVERSAL ---------------------------------------- //
// ------------------------------------------------------------------------------------------- //
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

// ---------------------------------------- FLICKITY ---------------------------------------- //
// ------------------------------------------------------------------------------------------ //

var elem = document.querySelector('.main-carousel');
var flkty = new Flickity(elem, {
    // options
    cellAlign: 'left',
    contain: true
});

// element argument can be a selector string
//   for an individual element
var flkty = new Flickity('.main-carousel', {
    // options
});
 
// ---------------------------------------- ANIMATIONS ---------------------------------------- //
// -------------------------------------------------------------------------------------------- //

/* ---------------------------------------- UNIVERSAL STYLES ---------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

.topnav {
    background-color: #333;
    overflow: hidden;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

.topnav .icon {
    display: none;
}

.rightMenuItems {
    float: right !important;
}

.scrollDown {
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    
}

.scrollDown a {
    text-decoration: none;
}

.scrollDown p {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    color: #fff;
}

.fa-chevron-down {
    width: 50px;
    height: 50px;
    font-size: 32px;
    color:  #fff;
    ;
}

.scrollDown:hover {
    transition: .2s ease;
}

/* ---------------------------------------- ANIMATIONS ---------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    5% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-25%);
    }
    15% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}
.fa-chevron-down {
    animation: bounce 10s infinite;
}



/* ---------------------------------------- FLICKITY ---------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.carousel-cell {
    width: 100%;
    height: 100vh;
    margin-right: 10px;
}

.homeSection1 .carousel-cell {
    background-color: #02cd82;
}

.homeSection2 .carousel-cell {
    background-color: #cd4902;
}

.homeSection3 .carousel-cell {
    background-color: #0249cd;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Fox Bank</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles/styles.css">
        <link rel="stylesheet" href="styles/normalize.css">
        <link rel="stylesheet" href="styles/responsive.css">
        <link rel="stylesheet" href="styles/flickity.min.css" media="screen">
        <link rel="stylesheet" href="styles/scrollbutton.css">
        <script src="https://kit.fontawesome.com/8821130486.js" crossorigin="anonymous"></script>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
        <script src="js/jquery.js"></script>

    </head>

    <body>
        <div class="topnav" id="myTopnav top">
            <a href="#home" class="active">Home</a>
            <a class="rightMenuItems" href="#news">News</a>
            <a class="rightMenuItems" href="#contact">Contact</a>
            <a class="rightMenuItems" href="#about">About</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fas fa-bars"></i>
            </a>
        </div>

        <!-- Main Image Carousel -->
        <div id="homeSection1">
            <div class="main-carousel homeSection1" data-flickity='{ "autoPlay": 6000 }'>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
            </div>
            <div class="scrollDown">
                <a class="nextSection" href="#homeSection2">
                    <i id="scrollDownArrow" class="fas fa-chevron-down"></i>
                    <p>Scroll</p>
                </a>
            </div>
        </div>
        
        <div id="homeSection2">
            <div class="main-carousel homeSection2" data-flickity='{ "autoPlay": 6000 }'>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
            </div>
            <div class="scrollDown">
                <a class="nextSection" href="#homeSection3">
                    <i id="scrollDownArrow" class="fas fa-chevron-down"></i>
                    <p>Scroll</p>
                </a>
            </div>
        </div>

        <div id="homeSection3">
            <div class="main-carousel homeSection3" data-flickity='{ "autoPlay": 6000 }'>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
                <div class="carousel-cell">...</div>
            </div>
            <div class="scrollDown">
                <a class="nextSection" href="#homeSection3">
                    <i id="scrollDownArrow" class="fas fa-chevron-down"></i>
                    <p>Scroll</p>
                </a>
            </div>
        </div>
        
        
        <script src="js/app.js" async defer></script>
        <script src="js/flickity.min.js"></script>
    </body>
</html>

Solution

since the there is position:absolute; rule on .scrolllDown section. You should add position: relative; to the main sections homeSection2 or homeSection3 etc. Then the problem goes away.