Help with jQuery and scrollTo

[vneal]

Hi there – 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 – it 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?

HTML is here:

 Top Power Boats >




> ACM (50)



> Aquador (50)



> Arno Leopard (50)



> Astondoa (50)



> Avon) (50)



> Azimut (50)



> Baja (50)



> Bavaria (50)



> Bayliner (50)



> Beneteau (50)



> Bertram (50)



> Boston Whaler (50)



> Broom (50)



> Burger (50)


...

And 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 hep would be greatly appreciated.

Thanks

[Tim_at_PlattFormAd]

Here’s some code I’ve used to scroll the user to various parts of a page. I normally use an element’s id as the point to scroll to. Not sure exactly where you would need to implement it with your current code, though…

$('html,body,window').animate({ scrollTop: $('#div-id').offset().top }, { duration: 'fast', easing: 'swing'});

[Author]

Posts