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

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

Примерно так: https://jsfiddle.net/b6wd5s4m/
Как сделать так, чтобы при раскрытии блока его нижняя граница была зафиксирована и оставалась у нижней границы экрана, а страница как бы прокручивалась вниз?

Ответ

Тогда так, доки - 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; }