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/

这样，每次用户点击某个类别时，屏幕都会滚动回到顶部。

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

1 个答案: