我有一个包含各种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>