自定義jQuery手風琴 - 滾動到活動面板的頂部

Question

我有一個自定義jQuery手風琴的問題。我無法在jQuery UI中使用手風琴，因此我堅持使用自定義解決方案。

我在這裏創造一個小提琴：https://jsfiddle.net/1x11ceev/9/

我的jQuery：

var allPanels = $('#accordion > .acc-item > .container > .content-text').hide(); 

$('#accordion > .acc-item').click(function() { 

    if ($(this).hasClass('active')) { 
     allPanels.slideUp(); 
     allPanels.parent().parent().removeClass('active'); 
    }else{ 
    allPanels.slideUp(); 
    allPanels.parent().parent().removeClass('active'); 
    $(this).addClass('active'); 
    $(this).children().children('.content-text').slideDown(); 
     return false; 
    } 
    $('html, body').animate({scrollTop: $(this).offset().top + 100 }, 'slow'); 

});` 

我需要的是有活動面板滑動到頂部（與偏移過，因爲我有一個固定的頭）。我嘗試使用ScrollTop，但無濟於事。 當前行爲： 如果我展開第一部分，然後向下滾動到第二部分並展開它，第一部分摺疊，因此文檔的高度減小，然後第二部分拉出視口。

我的jQuery技能是有限的。任何幫助表示讚賞。

謝謝。

Answer 1

試試這個。

您需要做的是僅在完成活動幻燈片的動畫後才移動滾動條。 slideDown接受函數作爲完整的回調函數。所以我將你的滾動代碼移到了這個函數中。

並且從頂部有一些餘量，100應該是減號，而不是加到scrollTop。

var allPanels = $('#accordion > .acc-item > .container > .content-text').hide(); 
 
    
 
    \t $('#accordion > .acc-item').click(function() { 
 

 
    \t \t if ($(this).hasClass('active')) { 
 
    \t \t \t allPanels.slideUp(); 
 
    \t \t \t allPanels.parent().parent().removeClass('active'); 
 
    \t \t }else{ 
 
    \t allPanels.slideUp(); 
 
    \t allPanels.parent().parent().removeClass('active'); 
 
    \t $(this).addClass('active'); 
 
    \t $(this).children().children('.content-text').slideDown(
 
      function(){ 
 
       debugger; 
 
       $('html, body').animate({scrollTop: $(this).offset().top - 100 }, 'slow'); 
 
      } 
 
     ); 
 
      return false; 
 
    \t } 
 
     
 

 
\t });

.acc-item { padding:45px 0 50px;} 
 

 
#icecream { background:#ccc;} 
 
#shakes { background: #ddd;} 
 
#floats { background: #bbb;} 
 
.acc-item .content-text{} 
 
.acc-item h3 { margin:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fillerText"> 
 
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p> 
 
</div> 
 

 
<div id="accordion"> 
 

 
    <div id="icecream" class="home-section acc-item"> 
 
\t  <div class="container clear"> 
 
      <h3>FIRST SECTION</h3> 
 
      <div class="content-text"> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
      </div> 
 
\t \t </div><!--.container--> 
 
\t </div><!--#icecream--> 
 

 
    <div id="shakes" class="home-section acc-item"> 
 
\t \t <div class="container clear"> 
 
      <h3>SECOND SECTION</h3> 
 
      <div class="content-text"> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
      </div> 
 
     </div><!--.container--> 
 
    </div><!--#shakes--> 
 

 
\t <div id="floats" class="home-section acc-item"> 
 
\t \t <div class="container clear"> 
 
      <h3>THIRD SECTION</h3> 
 
      <div class="content-text"> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
       <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
 
      </div> 
 
\t \t </div><!--.container--> 
 
\t </div><!--#floats--> \t \t \t 
 
</div><!--#accordion--> 
 

 
<div class="fillerText"> 
 
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p> 
 
</div>