我有一个基金会手风琴。当我单击一个手风琴锚点时，我希望它滚动到当前面板的顶部（尽管只需单击到手风琴控件的顶部即可）。面板的大小视内容而异。因此，我认为抵消额是固定的。第一次单击有效，因为偏移量计算正确。但是，在随后的单击中，我认为是在计算位置，然后滚动。但是在滚动过程中，将加载新面板，并且偏移量也会更改。因此它滚动到面板中间的某个位置。至少那是我的理论。更令人困惑的是，它实际上是一个选项卡控件，对于小屏幕来说，它会变成手风琴。
这是手风琴：
<dl class="accordion" data-accordion>
<dd class="accordion-navigation active">
<a class="show-for-small-only" href="#panel11">First Panel</a>
<div class="content active" id="panel11">
<div class="row">
<div class="medium-12 columns">
<div class="panel radius">
<h1 class="text-center">Some Header Text</h1>
</div>
</div>
</div>
<div class="row">
<div class="medium-4 columns end">
//Some content...
</div>
<div class="medium-4 columns">
//Some content...
</div>
<div class="medium-4 columns">
//Some content...
</div>
</div>
</div>
<a class="show-for-small-only" href="#panel21">Second Panel</a>
<div class="content active" id="panel21">
<div class="row">
<div class="medium-12 columns">
<div class="panel radius">
<h1 class="text-center">Some Header Text</h1>
</div>
</div>
</div>
<div class="row">
<div class="medium-4 columns end">
//Some content...
</div>
<div class="medium-4 columns">
//Some content...
</div>
<div class="medium-4 columns">
//Some content...
</div>
</div>
</div>
</dd>
</dl>
这是滚动脚本：
<script>
$(".accordion dd > a").click(function () {
var href = $(this).attr("href")
$('html, body').animate({
scrollTop: ($(href).offset().top)
}, 1000);
});
</script>
这是有效的最终解决方案：
$(".accordion dd > a").click(function () {
var self = this;
setTimeout(function () {
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 100 });
}, 310);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句