JQuery slideUp нижняя страница

Question

У меня проблема с аккордеоном. У меня есть место, где пользователь может щелкнуть по нему (внизу моей страницы) и перевернуть контент. Моя проблема: все работает правильно, но мне нужно прокручивать вручную, чтобы увидеть свернутый контент. Я не знаю, что делать. Я уже пытаюсь переключиться вместо slideUp, создаю «push» div .. но это не нормально.

Посмотрите мой код ниже.

$(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>

Перейти к нижней части страницы, КлиК по ссылке, и вы можете увидеть, что у вас есть свиток, чтобы увидеть содержимое скрыть. Как это сделать автоматически?

Я думаю, что лучшим решением является «когда я clic на мой 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, чтобы узнать больше из ответа Питера Айтаи.