事件侦听器 onclick()?-手风琴

Question

我有一系列使用以下代码激活的手风琴：

$(function () {
        $(".specialreveal").hide();
        $('[href="#"]').attr('href', 'javascript:void(0)');
        $(document).on("click", "a.biobutton", function () {
            var $currentSection = $(this).closest(".biowrapper").find(".specialreveal").toggle('slow').end();
            //If you want to hide all other `specialreveal` sections
         $(".biowrapper").not($currentSection).find(".specialreveal").hide('fast').end();

        });
    }); 

我想在单击元素时将手风琴滚动到顶部，并且正在使用这个：

$( ".biowrapper" ).click(function() {
        $('html,body').delay( 1200 ).animate({scrollTop: $(this).offset().top}, 800);
});

我的问题是，如果上面的手风琴选项卡打开，而我单击下面的一个，则滚动到顶部被抛出，因为，假设数学是在打开两个选项卡的情况下计算的，所以当一个关闭时，顶部引用是错误的。

我尝试设置延迟（），触发器（）等，但我似乎无法正确。

我希望能够在上一个标签关闭并且新标签打开后滚动到顶部。

Answer 1

问题是offset().top是立即计算然后存储以供以后使用的 animate .

只需使用计时器来延迟操作：

$( ".biowrapper" ).click(function() {
    setTimeout(function(){
        $('html,body').animate({scrollTop: $(this).offset().top}, 800);
    }, 1200);
});

理想情况下，您将通过手风琴本身上的事件来侦听前面的操作结束

Answer 2

听起来您希望

滚动在激活事件上运行

激活面板后触发（动画完成后）

$(".biowrapper").accordion({
    activate: function(evt, ui) {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 800);
    }
});