jQuery手风琴，点击标签开头滚动到顶部，如果展开的标签在被点击的标签上面则无效？

Question

我在使用jQuery手风琴时遇到了一些问题。

我希望所点击的选项卡始终位于页面顶部上方固定像素的位置，我已经实现了这个功能。但是，如果当前激活的选项卡在被点击的选项卡上面，并且页面已经向下滚动了一点，那么被点击选项卡的顶部和内容的某些部分将会滚动到页面顶部之上。

这是我目前的代码：

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300
    });
    $('#accordion h3').bind('click',function(){
        theOffset = $(this).offset();
        $('body,html').animate({ 
            scrollTop: theOffset.top - 100 
        });
    });
});

这里有一个示例来说明我的问题。

例如，展开“第2节”，向下滚动并单击“第3节”选项卡，所有内容都会滚动到页面外面，但反过来就可以正常工作。

如果在打开新选项卡之前关闭活动选项卡，也可以正常工作，因此我认为这与折叠选项卡的高度有关，导致滚动到顶部的功能出现问题！？

希望有人能帮忙，我可能采取了错误的方法。我对jquery的技能仅限于基本的剪切和粘贴理解！^^

提前感谢所有的帮助和指针！:)

谢谢

- Andre

Answer 1

是的，关闭选项卡时关闭的选项卡高度是问题的原因。

由于上面的选项卡被折叠，所以点击的h3标签的顶部立即发生更改。

解决方法（可能不是很好的一种）是在折叠动画完成后触发滚动动画，即如果折叠动画设置为300毫秒，则在310毫秒后开始滚动动画。

$(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300 // collapse will take 300ms
        });
        $('#accordion h3').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 100 });
            }, 310); // ensure the collapse animation is done
        });
});

更新的Fiddle示例

- techfoobar

---

是的！ :D 非常感谢，我试图延迟实际的滚动事件但没有成功，但这个方法可行！太好了！ - Andre

运行良好！我唯一的问题是为什么要使用 var self = this;？我尝试使用 var theOffset = $(this).offset();，但它没有起作用。你有任何想法吗？ - Technotronic

@Technotronic - 因为 setTimeout 回调函数内的 this 值与外部不同。 - techfoobar

好的，我太傻了。谢谢！ - Technotronic

Answer 2

您可以为手风琴添加一个已激活的功能。这样，一旦其他显示/隐藏动画完成，它就会触发。

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300,
        activate: function(event, ui) {
            try {
                theOffset = ui.newHeader.offset();
                $('body,html').animate({ 
                    scrollTop: theOffset.top 
                });
            } catch(err){}
        }
    });
});

如果您折叠一个已打开的手风琴选项卡，ui.newHeader将未定义，因此需要使用try-catch。

- RedEight