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

Question

我正在使用ZURB Foundation (v6) Accordions。

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

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

的setTimeout被使用，因为手风琴的slideSpeed的。如果你不使用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(); 
});