自定義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. 第二個問題是，歌劇使動畫$('html, body')動畫化。事實上，它們都是動畫，然後是另一個，所以頁面看起來像倒轉。有一個很好的博客文章，有關解決該問題的方法here，但我已將它包含在下面的代碼中。

於是刪除所有幻燈片藝術家代碼（沒有必要重複每位藝術家），並嘗試這個辦法：

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