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

这是一个小提琴来说明我的问题，

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.

一种解决方法(也许是一个不好的选择)是在收起动画结束后触发滚动动画，即，如果将收起动画设置为300ms，则在310ms左右开始滚动动画.

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屋！