The scrolltop of page is changed when I move scroll a little and hide element.
(if scrolltop is 0, it doesn't happen). Condition is
property of the element's parents is {position: absolute; bottom:0; right: 0} and I move scroll of page.
Then the scrolltop move to bottom.
Why it happen?
$('button.close').on('click', function(){
$('.layer-content').css({display: 'none'})
});
$('button.show').on('click', function(){
$('.layer-content').show()
});* {
margin: 0;padding: 0;
}
.parent {
position:relative;
height: 300px;
background: #d0d0d0;
}
.parent .layer {
position: absolute;
bottom: 0;
right: 0;
width: 500px;
background: #c0c0c0;
}
.parent .layer button {
position: absoulte;
top: 0;
right: 0
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<button class="show">show</button>
<div class="layer">
<div class="layer-content">
<button class="close">close</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolore necessitatibus cupiditate maiores, optio aut. A nisi possimus voluptate velit, voluptates repellendus dolorum, totam quia fuga neque, provident vel tempore?
</div>
</div>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.
</div>