Highlight "Accordion Element Up Right After Opening" (Foundation Framework)

Question

I use ZURB Foundation Accordions (v6) .

When the accordion opens, I want to scroll to the top of this accordion. I can run this code:

$("#arf").on("down.zf.accordion", function() {
   $('html,body').animate({scrollTop: $(this).offset().top}, 'slow');
});

Of course, this scrolls the page at the top of the accordion, not the accordion. How do I change this code to go to the accordion element when it opens?

Answer 1

Here is the solution I found that works. This works for version 6 of Foundation for Sites.

$("#form-selector").on("up.zf.accordion", function(event) {
    setTimeout(function(){
        $('html,body').animate({scrollTop: $('.is-active').offset().top}, 'slow');
    }, 250); //Adjust to match slideSpeed
}); 

setTimeout - slideSpeed . setTimeout, down.zf.accordion, .

down.zf.accordion down.zf.accordion up.zf.accordion, down.zf.accordion, ( ) . , .

Answer 2

<a> . .

JS

$('.accordionBtn').on('click', function(event) {
   $('html,body').animate({scrollTop: $(event.target).offset().top}, 'slow');
});)

CSS

<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a class="accordionBtn" href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a class="accordionBtn" href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a class="accordionBtn" href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>

Answer 3

, @L84, .

$active (: , ). $active - , . .

, , - , , .

$(function () {
  var $active;

  $(".accordion").on("click", ".accordion-title", function () {
    var itemIndexNew = $(".accordion-item").index($(this).parent());
    var itemIndexOld = ($active ? $(".accordion-item").index($active) : null);
    if (itemIndexOld !== null && itemIndexOld < itemIndexNew) {
      $("html, body").scrollTop($(window).scrollTop() - $active.height());
    }
  });

  $(".accordion").on("down.zf.accordion", function(e) {
    $active = $(".accordion").find(".accordion-item.is-active");
  });

  $(document).foundation();
});