Ionic 6 & Vue 3 | Ion-Modal scrollIntoView() Hides Fixed Header Issue

I created scrollTo functionality by clicking on an icon in a sidebar. The scrolling works but the ion-header is moved out of view when scrolling to the desired location.

Here is a video of the behavior I am describing: Screen Recording 2022-07-13 at 2.31.53 - Google Drive

Almost identical template works with Ionic 4 & Angular

Any ideas on what is wrong here?

Vue Template

        // Close modal button
      <ion-searchbar />
        // Vertical column of scroll to anchor tags
        <a @click="scrollTo('Math')">
          <ion-icon :icon="calculator"/>
        <ion-list-header id="Math">

scrollTo Function

function scrollTo (category: string) {
  let elementId = category.replace(' ', '')
  let subject = document.getElementById(elementId)
  if (subject) {
    subject.scrollIntoView({ behavior: 'smooth', block: 'start' })