jQuery 手风琴 + scrollTo - 需要手风琴才能滚动回到焦点

Question

想知道是否有人可以提供帮助。

我正在使用手风琴在分类网站上显示子类别列表，有 3 个主要类别 - 我们将它们称为 X、Y、Z。

我的问题是子类别列表可能会很长 -并且 X、Y、Z 之间不一致。目前，当单击标题 X 时，手风琴会远远超出折叠范围，因此显然用户会向下滚动页面。当用户单击 Y - 当前子类别列表要小得多时，手风琴将关闭，显示 Y 的子类别列表，但焦点不会在打开的 Y 手风琴上 - 窗口停留在子类别所在的底部X完成了。

有没有某种方法可以将用户引导回 ul.accordionMenu 的顶部？

---

JS 在这里：

jQuery.fn.initMenu = function() {   
    return this.each(function(){  
        var theMenu = $(this).get(0);  
        $('.acitem', this).hide();  
        $('li.expand > .acitem', this).show();  
        $('li.expand > .acitem', this).prev().addClass('active');  
        $('li a', this).click(  
            function(e) {  
                e.stopImmediatePropagation();  
                var theElement = $(this).next();  
                var parent = this.parentNode.parentNode;  
                if($(parent).hasClass('noaccordion')) {   
                    if(theElement[0] === undefined) {  
                        window.location.href = this.href;  
                    }  
                    $(theElement).slideToggle('normal', function() {  
                        if ($(this).is(':visible')) {  
                            $(this).prev().addClass('active');  
                        }  
                        else {  
                            $(this).prev().removeClass('active');  
                        }     
                    });
                    return false;  
                }  
                else {  
                    if(theElement.hasClass('acitem') && theElement.is(':visible')) {  
                        if($(parent).hasClass('collapsible')) {  
                            $('.acitem:visible', parent).first().slideUp('normal',  
                            function() {  
                                $(this).prev().removeClass('active');  
                            }  
                        );  
                        return false;   
                    }  
                    return false;  
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {          
                    $('.acitem:visible', parent).first().slideUp('normal', function() {  
                        $(this).prev().removeClass('active');  
                    });  
                    theElement.slideDown('normal', function() {  
                        $(this).prev().addClass('active');  
                    });  
                    return false;  
                }  
            }  
        }  
    );  
});  
};  

$(document).ready(function() {$('.accordionMenu').initMenu();});  

---

任何帮助将不胜感激 - 我已经在这里搜索并尝试了一些建议，但似乎没有任何效果。

Answer 1

在单击事件中，使用 animate() 平滑滚动回手风琴的最顶部。

$('html, body').animate({scrollTop: $("#accordion").offset().top}, 500);

这会将屏幕滚动到#accordion 的最顶部。

是一个简单的长列表的示例：http://jsfiddle.net/SPL_Splinter/dJcBn/

这 每次用户单击一个类别时，屏幕都会滚动回顶部。