Maintain consistent tab height

Does anybody know how to prevent the scroll event that takes place when using tabs?

I have tabbed content in the middle of a page, and with longer content inside them, there is a scroll event that manipulates the page scroll.

I’ve tried all sorts of js event prevention, return false, javascript void, etc. but I cannot find the magic here.

Using standard tabs:

<ul class="nav nav-tabs" id="navTabs_steps_notes" role="tablist">
     <li class="nav-item">
          <a class="nav-link active" id="tabLink_steps" data-toggle="tab" href="#" data-target="#tab_steps" role="tab" aria-controls="tab_steps" aria-selected="true">Steps</a>
     </li>
     <li class="nav-item">
          <a class="nav-link" id="navLink_notes" data-toggle="tab" href="#" data-target="#tab_notes" role="tab" aria-controls="tab_notes" aria-selected="false">Notes</a>
    </li>
</ul>