与accordion结合使用的自定义Jquery幻灯片到div脚本不能完全正常工作

我之前在一个网站上为一个艺术家部分编写了一个简单的手风琴脚本。手风琴效果很好，但是由于每个部分显示的内容的大小，我决定最好将每个部分滑动到屏幕顶部，以避免每个访问者自己手动滚动

然而，我遇到了一个小问题——我为使每个部分滑入视图而编写的当前脚本似乎会发生什么，取决于要滑动的div相对于视口/屏幕的位置，动画似乎无法正常工作…它几乎需要重置自身或其他东西，以了解新ID正在被触发？？？我不知道

以下是我当前的标记：

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-幻灯片至艺术家-这是我需要帮助的部分，请

$(document).ready(function(){

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

    $('#artist_02').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");
    });

});

我希望有人能给我指出正确的方向，因为我感觉很快就能让它正常工作了，但我只是不知道足够的java/jquery来解决我可能缺少的东西

提前谢谢你的帮助

---

马上做两件事

随着手风琴的展开和收拢，偏移顶部会发生变化，这就是顶部无法正常工作的原因。因此，最好的解决方案是保存所有这些位置，因为它们不会更改并使用这些数字

第二个问题是opera搞乱了

$（'html，body'）

的动画制作。事实上，它会为这两个页面设置动画，一个接着另一个，这样页面看起来就像是在倒带。有一篇很好的博客文章介绍了解决这个问题的方法，但我已经将其包含在下面的代码中

因此，请删除所有幻灯片至艺术家代码（无需为每个艺术家重复），然后尝试以下操作：

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

---

惊人的解决方案。非常感谢你的帮助！看起来也很好，根据firebug的说法，没有奇怪的错误或冲突：）

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