Question

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

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

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

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

由于手风琴的slideSpeed，使用了setTimeout。如果您不使用setTimeout，则会在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();
});

Answer 4

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

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

4 个答案: