没有自动对焦字段，但在iframe更改时我的页面仍向下滚动

如何解决没有自动对焦字段，但在iframe更改时我的页面仍向下滚动

我有一个侧面导航栏，当我单击任何链接时，特定的iframe内容会加载到正确的空间中。现在，只有一页包含输入表单。加载时，该iframe可以正常运行（不会滚动到底部），但是没有输入代码的其他iframe则向下滚动。并关注页脚（也没有输入字段）有什么线索可能是潜在的问题吗？

编辑：这是代码结构

主页的HTML。

<div class="main-container">
        <div
          class="sidenav">
       
          <ul style="padding: 0">
            <a id="xyz"  href="#xyz">
              <img src="xyz.svg" />
              XYZ</a
            >

            <a id="abc" href="#abc">
              <img src="abc.svg" />
              ABC</a
            >
           </ul>
        </div>

        <!-- side nav end  -->

        <div class="container-fluid side-content">

          <iframe src="xyz.html" id="xyz-frame" height="100%" width="100%" style="outline: none; border:none; "></iframe>

          <iframe src="abc.html" id="abc-frame" height="100%" width="100%" style="outline: none; border:none; "></iframe>

        

        <!-- Side content end -->
        </div>

      </div>

    <footer>
      <!--footer content--!>
    </footer>

CSS main：

#xyz-frame,#abc-frame{
display:none;
}

JS main：


  $(document).ready(function() {
  $("#xyz").click(function() {
    $("iframe").hide();
    $("#xyz-frame").show();
  });
});

  $(document).ready(function() {
  $("#abc").click(function() {
    $("iframe").hide();
    $("#abc-frame").show();
  });
});

xyz.html

<body>
<div class="container-fluid side-content">
          <div class="container-fluid container-heading">
            <p class="heading">Locations</p>
          </div>


          <div class="container-fluid container-list-items">
            <div class="grid-1">
              <p style="align-self: center">123</p>
              <img style="align-self: center" src="img.svg" />
              <p style="align-self: center">celia</p>
              <p style="align-self: center">celia</p>
              <p style="align-self: center">celia</p>
              <p style="align-self: center">2020</p>
            </div>

          </div>
        </div>
</body>