自定义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>