jQuery 手风琴，将单击的选项卡的开头滚动到顶部，如果展开的选项卡位于被单击的选项卡上方，则不起作用? [英] jQuery accordion, scroll beginning of clicked tab to the top, doesn't work if expanded tab is above the one being clicked?

问题描述

让我的 jquery 手风琴做我想做的事情有点问题.

Got a little bit of a problem with getting my jquery accordion to do what I want.

我总是希望被点击的选项卡从页面顶部滚动到固定数量的像素，我有点让它工作.但是，只要活动选项卡位于被单击的选项卡上方，并且页面已经向下滚动一点，单击选项卡的顶部和部分内容就会向上滚动超过页面顶部.

I always want the tab that is being clicked to be scrolled to a fixed amount of pixels from the top of the page, and I kinda got it working. But whenever the active tab is above the tab being clicked and if the page already is scrolled down a bit, the top and parts of the content of the clicked tab is scrolled up past the top of the page.

这是我得到的:

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

这是一个 fiddle 来说明我的问题，

Here's a fiddle to illustrate my problem,

例如，展开第 2 部分"，向下滚动并单击第 3 部分"选项卡，它就会全部滚动到页面之外，但其他方式也可以.

For example, have "section 2" expanded, scroll down and click "section 3" tab and it all scrolls off the page, other way around it works though.

如果在打开一个新标签之前关闭活动标签它也可以正常工作，所以我假设这与折叠标签的高度有关，这会破坏滚动到顶部的功能！?

And if closing the active tab before opening a new one it also works fine so I'm assuming this has something to to with the height of the collapsing tab that messes up the scroll to top function!?

希望有人能帮忙，我可能以错误的方式处理这个问题.我真的不知道我实际上在做什么，因为我的 jquery 技能仅限于基本的剪切和粘贴理解！^^

Hope someone can help, I probably approach this the wrong way. I kinda really don't know what I'm actually doing as my jquery skills are limited to a basic cut n' paste understanding! ^^

提前致谢，欢迎所有帮助和指点区域！:)

Thanks in advance and all help and pointers area more then welcome! :)

干杯

推荐答案

是的，它关闭的选项卡的高度是问题的原因.

Yes, its the height of the tab thats getting closed thats the cause of the issue.

点击 h3 的顶部会立即发生变化，因为其上方的选项卡已折叠.

The top of the clicked h3 changes immediately afterwards due to the collapsing of a tab above it.

一种解决方法(可能是一个糟糕的方法)，是在折叠动画完成后触发滚动动画，即如果折叠动画设置为 300 毫秒，则在 310 毫秒后开始滚动动画.

A workaround (a bad one perhaps), is to trigger the scroll animation after the collapse animation finishes, i.e. if the collapse animation is set for 300ms, start off the scroll animation after 310ms or something.

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

更新小提琴

这篇关于jQuery 手风琴，将单击的选项卡的开头滚动到顶部，如果展开的选项卡位于被单击的选项卡上方，则不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！