Setting iframe src with onClick mysteriously removes top portion of page

I’m using HTML button tags with onClick event to set the src of an iframe.

When I click a tab to set the src and load the iframe, the iframe grabs the focus(which is fine) and some of the top of the page is cut off and I can’t scroll back up to it. Sometimes it never happens and sometimes it always happens. The iframe grabbing focus happens every time.

Everything functions mostly as expected just with this weird quirk. I am not seeing anything obvious that is the cause. I opened the inspector in Chrome and didn’t see any unnecessary properties being applied to the header.

If it matters, this is happening in SharePoint Online (Office 365) which is why I have type=”button” in each button tag.

Essentially, if you’ve ever worked in Office 365 then the best way to describe what is happening is that the top nav bar launcher + a little bit underneath it get cut off. This is the bar that has the applauncher in the top-left hand corner, then says “Office 365”, and then all the way at the right is your profile settings button.

Here is the code:

HTML

<div class="tab">
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 2-E', 'conf2e')" type="button">​​​​​​​​​​​​​2-E</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 3-C', 'conf3c')" type="button">3-C</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 3-D', 'conf3d')" type="button">3-D</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 3-E', 'conf3e')" type="button">3-E</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 4-A', 'conf4a')" type="button">4-A</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 4-B', 'conf4b')" type="button">4-B</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 4-D', 'conf4d')" type="button">4-D</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 4-E', 'conf4e')" type="button">4-E</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 5-A', 'conf5a')" type="button">5-A</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 5-B', 'conf5b')" type="button">5-B</button>
   <button class="tablinks" onclick="openCalendar(event, 'Conference Room 5-C', 'conf5c')" type="button">5-C</button> 
</div>
<div class="tabcontent" id="calendar" style="display: block;">
   <iframe name="ConferenceCalendar" src="about:blank" width="100%" height="1080" id="confFrame" ></iframe> 
</div> 

CSS

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

JavaScript

function openCalendar(evt, calendarName, frameName) {

// Declare all variables
var i, tabcontent, tablinks, calurl;

switch (calendarName)
{
case "Conference Room 2-E":
calurl = "someUrl";
break;
case "Conference Room 3-C":
calurl ="someUrl";
break;
case "Conference Room 3-D":
calurl = "someUrl";
break;
case "Conference Room 3-E":
calurl = "someUrl";
break;
case "Conference Room 4-A":
calurl = "someUrl";
break;
case "Conference Room 4-B":
calurl = "someUrl";
break;
case "Conference Room 4-D":
calurl = "someUrl";
break;
case "Conference Room 4-E":
calurl = "someUrl";
break;
case "Conference Room 5-A":
calurl = "someUrl";
break;
case "Conference Room 5-B":
calurl = "someUrl";
break;
case "Conference Room 5-C":
calurl = "someUrl";
break;
default:
break;
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) 
    {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById('confFrame').src = calurl;
evt.currentTarget.className += " active";

}