Фиксированная нижняя граница при увеличении высоты блока

#javascript #css

На странице в самом низу есть блок. При клике на него его высота увеличивается. Но
прокрутка страницы остается на месте, а блок увеличивается вниз.


  

  



Примерно так: https://jsfiddle.net/b6wd5s4m/

Как сделать так, чтобы при раскрытии блока его нижняя граница была зафиксирована
и оставалась у нижней границы экрана, а страница как бы прокручивалась вниз?
    

Ответы

Ответ 1

Тогда так, доки
- https://learn.javascript.ru/coordinates
- https://learn.javascript.ru/metrics-window



var open_block = document.getElementById('open_block');

open_block.addEventListener('click', function() {
  open_block.classList.toggle('open_block');
  var bot = open_block.getBoundingClientRect().bottom;
  window.scrollTo(0, bot);
});
.block {
  margin-top: 300px;
  width: 100%;
  height: 100px;
  background-color: #04a513;
  transparent: 1s;
}
.open_block {
  height: 300px;
  transparent: 1s;
}