Анимация кнопок при показе/скрытии ⇐ Javascript

[Anonymous]

Я использую код, который скрывает содержимое и отображает кнопку при прокрутке страницы на 250 пикселей вниз. При нажатии на кнопку открывается тот же контент, при повторном нажатии он скрывается.
Кажется, все работает как положено, но есть одна проблема. Кнопка появляется внизу блока, а над ней много пустого места, где должно быть содержимое.
Как анимировать кнопку, чтобы при ее появлении она поднималась вверх, как занавеска. И когда вы нажимаете кнопку, она перемещается вниз под контент.

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
const contentBlock = document.querySelector('.content');
const toggleButton = document.querySelector('.toggle-button');

// Manually switching the visibility of a block (by clicking a button)
function toggleVisibility() {
if (contentBlock.classList.contains('hidden-content')) {
contentBlock.classList.remove('hidden-content');
contentBlock.classList.add('show-content');
} else {
contentBlock.classList.remove('show-content');
contentBlock.classList.add('hidden-content');
}
}

// Button click event handler
toggleButton.addEventListener('click', () => {
toggleVisibility();
});

// Handling browser window scrolling
window.addEventListener('scroll', () => {
if (window.scrollY > 250) { // If you scrolled down the page by 250px
toggleButton.style.display = 'block'; // The appearance of the button
contentBlock.classList.remove('show-content'); // The content block is hidden
contentBlock.classList.add('hidden-content');
} else { // If you scrolled back up
toggleButton.style.display = 'none'; // The button is hidden
contentBlock.classList.remove('hidden-content'); // The content block appears again
contentBlock.classList.add('show-content');
}
});
});

Код: Выделить всё

.sticky-block {
position: sticky;
top: 90px;
z-index: 999;
transition: all .2s ease-in-out;
height:2000px;
}

.content {
transition: opacity 0.5s ease-in-out;
}

.toggle-button {
display: none;
max-width: 200px;
margin: 0 auto;
background-color: rgb(191, 79, 203);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}

.toggle-button:hover {
background-color: rgb(143, 62, 184);
}

.hidden-content {
opacity: 0;
visibility: hidden;
}

.show-content {
opacity: 1;
visibility: visible;
}

Код: Выделить всё

Content Here
Scrolling content
Show/Hide

Подробнее здесь: https://stackoverflow.com/questions/798 ... ing-hiding