Question

我有一支基金会手风琴。当我点击其中一个手风琴锚时，我想让它滚动到当前面板的顶部（虽然只是在手风琴控制的顶部就可以了）。面板的大小取决于内容。所以这个偏差是我认为搞砸了。第一次单击有效，因为偏移计算是正确的。但是在随后的点击中，我认为是计算位置，然后滚动。但在滚动期间，新面板加载并且偏移量发生变化。所以它滚动到面板的中间位置。至少这是我的理论。更令人困惑的是，它实际上是一个标签控件，可以回归到小屏幕的手风琴。

这是手风琴：

<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);
    });

在点击偏移计算上滚动到基础手风琴的顶部

2 个答案: