CODEWITHSUNDEEP
jqueryaccordionscrollto
V Neal
V Neal

Reputation: 419

jQuery accordion + scrollTo - need accordion to scroll back into focus

was wondering if anyone could help.

I'm using an accordion to display a list of sub-categories on a classifieds website, there are 3 main categories - we'll call them X, Y, Z.

My problem is that the sub-category lists can be quite long - and aren't consistent between X, Y, Z. Currently, when clicking on header X - the accordion extends way beyond the fold so obviously the user will scroll down the page. When the user clicks Y - currently with a lot smaller sub-category list, the accordion will close up revealing Y's sub-category list however the focal point will not be on the opened Y accordion - the window stays at the bottom where sub-category X finished.

Is there some way of directing the user back to the top of the ul.accordionMenu?

JS is here:

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

Any help would be greatly appreciated - I have searched on here and tried a few of the the suggestions however nothing seems to be working.

Upvotes: 0

Views: 3311

Answers (1)

SPL_Splinter
SPL_Splinter

Reputation: 503

In the click event use animate() to scroll smoothly back to the extreme top of the accordion.

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

This will scroll the screen to the extreme top of #accordion.

Here's an example with a simple long list: http://jsfiddle.net/SPL_Splinter/dJcBn/

This way every time the user clicks a category the screen will scroll back to the top.

Upvotes: 0

Related Questions