单击时滚动到 Foundation 手风琴顶部 - 偏移量计算
Scroll to top of Foundation accordion on click - offset calculation
我有一架 Foundation 手风琴。当我单击其中一个手风琴锚点时,我希望它滚动到当前面板的顶部(尽管只是滚动到手风琴控件的顶部就可以了)。面板的大小取决于内容。所以我认为偏移量搞砸了。第一次点击有效,因为偏移计算是正确的。但是在随后的点击中,我认为是在计算位置,然后滚动。但是在滚动过程中,新面板加载并且偏移量发生变化。所以它滚动到面板中间的某个地方。至少那是我的理论。更令人困惑的是,它实际上是一个选项卡控件,可以退回到小屏幕的手风琴。
这是手风琴:
<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>
啊,在你的脚本中检查 href 部分。应该是这样的
var elem = $(this);
$('html, body').animate({
scrollTop: elem.offset().top
}, 1000);
这是最终有效的解决方案:
$(".accordion dd > a").click(function () {
var self = this;
setTimeout(function () {
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 100 });
}, 310);
});
我有一架 Foundation 手风琴。当我单击其中一个手风琴锚点时,我希望它滚动到当前面板的顶部(尽管只是滚动到手风琴控件的顶部就可以了)。面板的大小取决于内容。所以我认为偏移量搞砸了。第一次点击有效,因为偏移计算是正确的。但是在随后的点击中,我认为是在计算位置,然后滚动。但是在滚动过程中,新面板加载并且偏移量发生变化。所以它滚动到面板中间的某个地方。至少那是我的理论。更令人困惑的是,它实际上是一个选项卡控件,可以退回到小屏幕的手风琴。
这是手风琴:
<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>
啊,在你的脚本中检查 href 部分。应该是这样的
var elem = $(this);
$('html, body').animate({
scrollTop: elem.offset().top
}, 1000);
这是最终有效的解决方案:
$(".accordion dd > a").click(function () {
var self = this;
setTimeout(function () {
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 100 });
}, 310);
});