2014-06-30 256 views
0

我有一個用基金會4製作的網站,我在頁腳中有一個手風琴。這只是一個鏈接,當您點擊時,它會隨着更多信息展開。它可以工作,但我必須手動滾動才能看到顯示的新內容,並且用戶不會注意到點擊後發生的任何事情,因此我需要頁面在點擊後自動滾動,以便他可以看到擴展的內容。滾動到顯示後隱藏的div的底部

我的手風琴是這個(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> 
+0

和你有什麼試過嗎? – coreyward

回答

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

作品很有魅力,謝謝! –