Автоматическая прокрутка веб-страницы с анимацией div

Question

Я делаю веб-приложение. Я создал 25 разделов.

У меня есть jquery fadeIn(), по которому divs постепенно создаются и отображаются один за другим на экране.

Но проблема в том, что при создании 25 divs создается прокрутка, из-за которой видны первые 4 divs, а оставшиеся не видны до тех пор, пока пользователь не прокрутит страницу.

Я хочу, чтобы как по одному div был создан, страница должна автоматически прокручиваться до недавно созданного div и т. Д. Этот процесс должен быть продолжен до тех пор, пока не будет создан последний div.

Answer 1

Вы можете использовать

$('html,body').scrollTop($(".answer.visible:last").offset().top);

$(function() { 
 
    $(".answer").hide(); 
 
    $('#demo').click(function(e) { 
 
    var _div = $('.answer[style*="display: none"]:first'); 
 
    if (_div.length) { 
 
     _div.fadeIn(); 
 
     $('html,body').animate({ 
 
      scrollTop: _div.offset().top 
 
     }, 
 
     'slow'); 
 
    } else { 
 
     $(this).text('Done..!'); 
 
    } 
 

 
    }); 
 
});

#demo { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    left: 0px; 
 
} 
 
.answer { 
 
    width: 100%; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="demo">Click here</button> 
 
<div class="answer">1</div> 
 
<div class="answer">2</div> 
 
<div class="answer">3</div> 
 
<div class="answer">4</div> 
 
<div class="answer">5</div> 
 
<div class="answer">6</div> 
 
<div class="answer">7</div> 
 
<div class="answer">8</div> 
 
<div class="answer">9</div> 
 
<div class="answer">10</div> 
 
<div class="answer">11</div> 
 
<div class="answer">12</div> 
 
<div class="answer">13</div> 
 
<div class="answer">14</div> 
 
<div class="answer">15</div> 
 
<div class="answer">16</div> 
 
<div class="answer">17</div> 
 
<div class="answer">18</div> 
 
<div class="answer">19</div> 
 
<div class="answer">20</div> 
 
<div class="answer">21</div> 
 
<div class="answer">22</div> 
 
<div class="answer">23</div> 
 
<div class="answer">24</div> 
 
<div class="answer">25</div>

Я думаю, что это выглядит очень здорово, когда мы используем slideDown + scrollTop. Check fiddle

Documentations

Чтобы получить координаты http://api.jquery.com/offset/

Установить вертикальное положение полосы прокрутки https://api.jquery.com/scrollTop/

Установите горизонтальное положение полосы прокрутки https://api.jquery.com/scrollleft/

Answer 2

Я нашел эту ссылку здесь smooth auto scroll by using javascript С помощью этого вы можете создать что-то подобное здесь: http://jsfiddle.net/mrc0sp5j/

Главное в том, что вы создаете скроллинга-функции с использованием

window.scrollBy or window.scrollTo 

http://www.w3schools.com/jsref/met_win_scrollto.asp С помощью jQuery .last или .eq вы можете указать, какой элемент вы хотите прокрутить до

$(".mydivobjects").eq(x).position().top 

Надеется, что это помогает приветствиям