打开手风琴的某个项目时，将滚动条滚动到该项目的顶部（基础框架）。

Question

我正在使用ZURB Foundation (v6) 手风琴。

当手风琴展开时，我想滚动页面到该手风琴项目的顶部。我可以运行以下代码：

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

当然，这会将页面滚动到手风琴的顶部，而不是手风琴项目。我该如何修改此代码，以便在打开手风琴时滚动到手风琴的项目？

- L84

---

由于Foundation声称自己是一个“移动优先”的框架，所以我认为这个问题应该被视为一个bug，并在本地进行解决。 - Nicolas Le Thierry d'Ennequin

Answer 1

以下是我发现可行的解决方案。该解决方案适用于 Foundation for Sites 的 6 版本。

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

< p > setTimeout 用于手风琴的 slideSpeed。如果不使用 setTimeout，则在 down.zf.accordion 触发时会滚动到错误的位置。

您也可以使用 down.zf.accordion 替代 up.zf.accordion，但是，如果使用 down.zf.accordion，它会在页面加载时触发（因为手风琴已初始化并打开），并滚动到手风琴项目。在我的情况下这是不需要的，但在某些情况下可能是需要的。

- L84

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>

- paulgoblin

Answer 3

您可以使用以下脚本，我也在使用Foundation 6手风琴，如果您在单个页面上有多个手风琴，这也将起作用。谢谢

jQuery(".accordion-title").click(function() {
    var $this = this;
    setTimeout(function(){
        jQuery('html,body').animate({scrollTop: jQuery($this).closest('.accordion').find('.is-active').offset().top}, 'slow');
    }, 250);
}); 

- ReynBargz

Answer 4

我最初使用了@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();
});

- Nicolas Le Thierry d'Ennequin