iframe自动滚动到底部-如何初始化它滚动到顶部?

我有一个包含各种iFrame的UI手风琴。第一个Iframe很好,不需要任何更改,但当我打开第二个accordion标题时,其中包含的Iframe初始化并滚动到页面底部。我想被滚动到顶部,但我不知道如何到达那里。这是在Razor中完成的,所以不要介意您看到的@syntax。

<div id="reports-accordion">
    <h1>Trend Report</h1>
    <div id="powerbireport">
        <iframe src="https://app.powerbi.com/view?##########" frameborder="0" allowFullScreen="true"></iframe>
    </div>
    <h1>Density Estimations</h1>
    <div>
        <p>
            James' Content
        </p>
        <button type="button" id="graphDwnld">Download Graph JPEG</button>
        @if (state == "AR")
         {
            <div>
                <iframe src="~/Content/DataVizByState/AR_Analysis_2018.pdf#zoom=100"></iframe>
            </div>
         }
         <!--Conditional continues-->
     </div>
</div>

CSS

#reports-accordion {
    margin-top: 30px;
    background-color: white;
}

#reports-accordion h1{
    font-size: larger;
    font-weight: bold;
}

#reports-accordion .ui-accordion-header.ui-state-default {
    background: rgb(82, 151, 95);
    color: white;
}

#reports-accordion .ui-state-default .ui-icon {
    background-image: url(../Content/img/ui-icons_ffffff_256x240.png);
}

#reports-accordion .ui-state-hover .ui-icon,
#reports-accordion .ui-state-active .ui-icon {
    background-image: url(../Content/img/ui-icons_050505_256x240.png);
}

#reports-accordion .ui-accordion-header.ui-state-hover, 
#reports-accordion .ui-accordion-header.ui-state-active{
    color: black;
}
iframe {
width: 100%;
height: 70vh;
display: block;
}

JS

$(document).ready(function () {
    $("#reports-accordion").accordion({
        collapsible: true,
        active: false,
        heightStyle: "content"
    });
});

用户界面库

<script src="~/Scripts/jquery-ui-1.11.4.js"></script>