Пользовательский jQuery аккордеон - прокрутите вверх до активной панели

Question

У меня проблема с пользовательским аккордеоне jQuery. Я не могу использовать аккордеон в пользовательском интерфейсе jQuery, поэтому я придерживаюсь настраиваемого решения.

Я создал скрипку здесь: 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>