Question

我有一个用基础4制作的网站，我在页脚中有一个手风琴。它只是一个链接，当您单击时，它会扩展并提供更多信息。它可以工作，但我必须手动滚动才能看到显示后的新内容，并且用户不会注意到点击后发生的任何事情，所以我需要页面在点击后自动滚动，这样他才能看到展开的内容内容。

我的手风琴就是这个（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将允许您在单击时滚动页面，以允许手风琴容器可见：

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

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

1 个答案: