Custom Jquery Slide-to-div script to be used in conjunction with accordion not entirely working correctly

I've previously scripted a simple accordion for an artists section on a site I'm working on. The accordion works great however due to the size of the content thats revealed in each section I decided it would be best if I made each section slide to the top of the screen to help avoid having each visitor scroll manually on their own.

Ive run into a small problem however - what seems to happen with the current script Ive written to make each section slide into view is depending where the div to be slided is in relation to the viewport/screen, the animation does not seem to function correctly...its almost like it needs to reset itself or something in order to understand that a new ID is being triggered??...I dunno...

Here is what my current markup looks like:

HTML

<div id="locate_artist_01"><!-- Unique ID assigned to each artist wrapper -->
   <div class="artist_leadimg">
     <h3 class="artist_bandname">ARTIST NAME</h3><!-- Band Name -->
     <div class="artist_toggle_trigger" id="artist_01" title="Show/Hide"></div><!-- Toggle Button -->
</div><!-- .artist_leadimg -->

   <div class="artist_toggle_container"></div>
</div>

<!-- ....repeated for each artist, but with different unique ID's -->

JQUERY - Accordion

$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $('.artist_toggle_container').hide(); 

    //On Click
    $('.artist_toggle_trigger').click(function(){
        if( $(this).parent().next().is(':hidden') ) { //If immediate next container is closed...
            $('.artist_toggle_trigger').removeClass('artist_toggle_active').parent().next().slideUp(); //Remove all "active" state and slide up the immediate next container
            $(this).toggleClass('artist_toggle_active').parent().next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
        }
        return false; //Prevent the browser jump to the link anchor
    });

});

JQUERY - Slide to artist - THIS IS THE PART I NEED ASSISTANCE WITH PLEASE

$(document).ready(function(){

    $('#artist_01').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_01").offset().top
        }, "slow");
    });

    $('#artist_0开发者_StackOverflow2').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_02").offset().top
        }, "slow");
    });

    $('#artist_03').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_03").offset().top
        }, "slow");
    });

    $('#artist_04').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_04").offset().top
        }, "slow");
    });

    $('#artist_05').click(function(){
        $('html, body').animate({
            scrollTop: $("#locate_artist_05").offset().top
        }, "slow");
    });

});

I'm hoping someone can point me in the right direction because I feel very close to getting this to work correctly but I just dont know enough java/jquery yet to work out what I may be missing...

Thank you for the help in advance.

Ok two things right off.

1. The offset top changes as the accordion expands and collapses, that's why the top doesn't work right. So the best solution would be to save all of these positions since they don't change and use those numbers
2. The second issue is that opera messes up animating the $('html, body'). In fact it animates both, one then the other so the page looks like it rewinds. There is a nice blog post about a way to work around that here, but I've included it in the code below.

So remove all of your slide to artist code (there is no need to repeat it for each artist) and try this:

$(document).ready(function(){
    var artists = $('.artist_toggle_trigger'),
        tops = artists.map(function(i){
            // save trigger parent div position in an array
            return $(this).parent().position().top;
        }).get(),

        // Opera scrolling fix - http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html
        scrollElement = 'html, body',
        scrollObject;
    $('html, body').each(function(){
        var initScrollTop = $(this).attr('scrollTop');
        $(this).attr('scrollTop', initScrollTop + 1);
        if ($(this).attr('scrollTop') === initScrollTop + 1) {
            scrollElement = this.nodeName.toLowerCase();
            $(this).attr('scrollTop', initScrollTop);
            return false;
        }
    });
    scrollObject = $(scrollElement);

    // Scroll artist block to top
    artists.click(function(){
        scrollObject.animate({
            scrollTop: tops[ artists.index($(this)) ]
        }, "slow");
    });
});