Jquery slideUp bottom page

Question

手風琴有問題。 我有一個地方，用戶可以在它上面（在我的頁面底部），並滾動內容。我的問題是：一切工作正常，但我必須手動滾動查看滾動的內容。 我不知道該怎麼辦。我已經嘗試切換而不是slideUp，創建一個「推」分區..但它不好。

看到我的代碼如下。

$(document).ready(function() { 
 
    $('.accordeon').hide(); // hide the content of .accordeon 
 
    $('h4').click(function() { // when clic on h4 
 
    $(this).next('div:hidden').slideDown() // roll the div 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p> 
 
\t 
 
\t \t \t \t \t 
 
<h4>CLIC HERE</h4> 
 
<div class="accordeon"> 
 
\t <img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg" alt="Metz" width="300" height="225" /> 
 
</div>

至頁面的底部，集團公司的鏈接，你可以看到你有滾動看到隱藏的內容。如何自動執行此操作？

我認爲最好的解決方案是「當我在我的div上改變頁面的位置」，但我不知道如何。

有人已經有這個問題嗎？

非常感謝大家！

Answer 1

使頁面在幻燈片功能之後滾動到元素的頂部。試試這個：

$(document).ready(function() { 
     $('.accordeon').hide(); // hide the content of .accordeon 
     $('h4').click(function() { // when clic on h4 
      $(".accordeon").slideToggle(function() { 
       $('html, body').animate({ 
        scrollTop: $(this).offset().top 
       }, 500); 
      }); 
     }); 
    }); 

Answer 2

如果您將id與div關聯，則可以使用JQuery滾動到它。

Click here瞭解更多來自Peter Ajtai的答案。