html - 滚动到显示后隐藏的 div 的底部

Question

我有一个用 foundation 4 制作的网站，页脚有一个 Accordion 。它只是一个链接，当您单击时，它会展开并显示更多信息。它有效，但我必须在显示后手动滚动才能看到新内容，并且用户不会注意到点击后发生了什么，所以我需要页面在他点击后自动滚动以便他可以看到扩展的内容。

我的 Accordion 是这个 ( http://foundation.zurb.com/docs/v/4.3.2/components/section.html ):

<div class="section-container accordion" data-section="accordion" data-options="one_up:false;">
    <section>
        <p class="title" data-section-title><a href="#">CLICK TO SEE MORE</a></p>
        <div class="content" data-section-content>
            <p>The hidden content is here</p>
        </div>
    </section>
</div>

Answer 1

使用 jquery 将允许您在点击时滚动页面，以允许 Accordion 容器可见:

$(document).ready(function(){
   $(".title").click(function(event){
    event.preventDefault();


    var sectionHeight = $('.section-container').height();
    var target_offset = $(this).offset();

    //this variable sets your target anchor place, adjust as needed
    var target_top = target_offset.top-sectionHeight;

    $('html, body').animate({scrollTop:target_top}, 1500);
    });
});