Как прокрутить до конца div после нажатия кнопки x раз?

Question

Я делаю панель, которая позволяет прокручивать. Кроме того, у меня есть кнопка, я хочу прокрутить содержимое панели вниз, после нажатия на кнопку 5 раз (5 x 20% от scrollHeight значения) .

I ' m, проверяя значение логирования, это правильно, но на самом деле содержимое панели уже прокрутилось до основания при нажатии кнопки 4 *. 1006 *

И 5, value обновлено, но содержимое панели не будет прокрутите больше.

$('button').on('click', function () {
  var $panel = $('.panel');
  var scrollHeight = $panel.prop('scrollHeight');
  var value = $panel.scrollTop() + scrollHeight * 0.2;
  
  console.log(scrollHeight + ' - ' + value);
  
  $panel.animate({ scrollTop: value }, 500);
});

.panel {
  height: 100px;
  border: 1px solid;
  overflow-x: hidden;
  overflow-y: auto;
}

.panel div {
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="panel">
  <div></div>
</div>

<button type="button">Scroll</button>

Answer 1

Я разобрался в проблеме. Это математика : / Вы на самом деле хотите это в 6 сегментах, если вы хотите нажать 5 раз. Первое состояние - это 1 из 5, поэтому до 5/5 можно получить только 4 дополнительных клика. Я изменил ваш свиток на /6, и это занимает 5 кликов.

$('button').on('click', function () {
  var $panel = $('.panel');
  var scrollHeight = $panel.prop('scrollHeight');
  var value = $panel.scrollTop() + (scrollHeight / 6);
  
 
  
  $panel.animate({ scrollTop: value}, 500);
});

.panel {
  height: 100px;
  border: 1px solid;
  overflow-x: hidden;
  overflow-y: auto;
}

.panel div {
  height: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="panel">
  <div></div>
</div>

<button type="button">Scroll</button>