与手风琴结合使用的自定义 Jquery Slide-to div 脚本不完全正常工作

Question

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

然而，我遇到了一个小问题 - 我编写的使每个部分滑入视图的当前脚本似乎会发生什么取决于要滑动的 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(){

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

$(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 还没有弄清楚我可能缺少什么...

提前感谢您的帮助。

---

Answer 1

好吧，有两件事。

1. 当手风琴展开和折叠时，偏移顶部会发生变化，这就是顶部无法正常工作的原因。因此，最好的解决方案是保存所有这些位置，因为它们不会更改并使用这些数字。
2. 第二个问题是 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");
    });
});