点击时滚动到 Foundation 手风琴顶部 - 偏移计算答案

【问题标题】：Scroll to top of Foundation accordion on click - offset calculation点击时滚动到 Foundation 手风琴顶部 - 偏移计算
【发布时间】：2015-03-27 14:30:21
【问题描述】：

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

【问题讨论】：

标签： asp.net zurb-foundation accordion

【解决方案1】：

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

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

【讨论】：

这只是打破了手风琴（意味着点击手风琴没有任何作用）。
我的意思是在退出函数之前和动画之后
这打破了手风琴： $(".accordion dd > a").click(function () { var href = $(this).attr("href") $('html, body ').animate({ scrollTop: ($(href).offset().top) }, 1000); return false; });
等一下，在上面的代码中，面板的 id 相同。你检查过吗？
那是我在 SO 上的代码示例的剪切和粘贴。固定问题

【解决方案2】：

这是最终的解决方案：

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

【讨论】：