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

时间:2018-09-21 14:31:07

标签: javascript jquery html razor

我有一个包含各种iframe的UI手风琴。第一个Iframe很好,不需要任何更改,但是当我打开第二个手风琴头时,包含在其中的Iframe初始化滚动到页面底部。我想滚动到顶部,但不确定如何到达顶部。这是在Razor中完成的,所以不要介意您看到的@语法。

<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"
    });
});

UI库

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

0 个答案:

没有答案