I am using jQuery slideToggle() to expand elements in a list, but when I scroll down the page with my mouse wheel, the down arrow key, or the page down key, the page stops where the page would normally end without the element being expanded. I can continue scrolling with the scroll bar, though. Here is my script:

<style>
.expand-arrow-link {
    padding: 14px;
    line-height: 1;
    background: none;
    border: 0;
    text-decoration: none;
}
.expand-arrow-link:hover {
    text-decoration: none !important;
}
.expand-arrow-link .x-icon {
    padding-bottom: 0rem !important;
}
.flip-arrow-up {
    transform: scaleY(-1);
    transition: 0.6s;
}
.flip-arrow-down {
    transform: none;
    transition: 0.6s;
}
#element_id_to_expand {
    display: none;
}
</style>

<script>
jQuery(document).ready(function() {
    var link = jQuery("#element_id_to_click");
    var expand = jQuery("#element_id_to_expand");

    // Add classes by default
    link.addClass("flip-arrow-down").addClass("expand-arrow-link").attr("aria-expanded", "false").attr("value", "expand");

    // Toggle jQuery
    link.click(function() { 
        expand.slideToggle();
        if (link.attr("aria-expanded") == "false") {
            link.addClass("flip-arrow-up").removeClass("flip-arrow-down").attr("aria-expanded", "true");
        } else {
            link.addClass("flip-arrow-down").removeClass("flip-arrow-up").attr("aria-expanded", "false");
        }                
    });
}); 

How do I get it to continue scrolling to the end of the page?