单击时滚动到 Foundation 手风琴顶部 - 偏移量计算

Question

我有一架 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>

Answer 1

啊，在你的脚本中检查 href 部分。应该是这样的

var elem = $(this); $('html, body').animate({ scrollTop: elem.offset().top }, 1000);

Answer 2

这是最终有效的解决方案：

$(".accordion dd > a").click(function () {
        var self = this;
        setTimeout(function () {
            theOffset = $(self).offset();
            $('body,html').animate({ scrollTop: theOffset.top - 100 });
        }, 310);
    });

单击时滚动到 Foundation 手风琴顶部 - 偏移量计算

Scroll to top of Foundation accordion on click - offset calculation

asp.net

zurb-foundation

accordion