Question:
There is a block at the very bottom of the page. When you click on it, its height increases. But the scrolling of the page stays in place and the block grows down.
<div class="main">
<div class="block" id="open_block">
</div>
</div>
Something like this: https://jsfiddle.net/b6wd5s4m/
How to make it so that when the block is expanded, its bottom border is fixed and remains at the bottom border of the screen, and the page seems to scroll down?
Answer:
Then so, docks
– 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;
}
<div class="main">
<div class="block" id="open_block">
</div>
</div>