打开后滚动到手风琴项目顶部（基础框架）

Question

打开手风琴时，我想将页面滚动到该手风琴项目的顶部。我可以运行这个代码：

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

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

Answer 1

您可以将自己的点击侦听器附加到每个手风琴 <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 2

这是我发现有效的解决方案。这适用于 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
});

之所以用setTimeout是因为手风琴的slideSpeed。如果你不使用 setTimeout 它会在 down.zf.accordion 触发时滚动，从而滚动到错误的位置。

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

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();
});

Answer 4

您可以使用下面的脚本，我也在使用 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);
});

打开后滚动到手风琴项目顶部（基础框架）

Scroll to Accordion Item Top Once Open (Foundation Framework)

accordion

zurb-foundation