Добавить контент выше просмотра и прокрутить ⇐ Html

[Anonymous]

Я пытаюсь создать анимацию, в которой я добавляю контент, который должен быть расположен над страницей. Когда добавляется контент, я хочу, чтобы он появился над страницей, а затем прокручивайте вверх. Однако, когда я добавляю свой контент, все остальное вместо этого отталкивается. Вот где я застрял: < /p>


const el = (sel, par = document) => par.querySelector(sel);
const els = (sel, par = document) => par.querySelectorAll(sel);

const elBody = el("body");
const elTop = el("#top");

const toggleContact = () => {
elBody.classList.toggle("is-show-contact");
if (elBody.classList.contains("is-show-contact")) {
elTop.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
};

els(".btn-contact").forEach((elBtn) => {
elBtn.addEventListener("click", toggleContact);
});< /code>
* {
margin: 0;
box-sizing: border-box;
}

.box {
height: 100dvh;
}

#top {
position: relative;
overflow: auto;
background: #ddd;
transition: height 1s;
height: 0dvh;

.is-show-contact & {
height: 100dvh;
}
}
img{
width:100%;
}< /code>

CONTACT FORM

Close

Scroll down as well...
Contact

Contact

Contact

Contact
< /code>
< /div>
< /div>
< /p>
Я получил идею со страницы под названием yearofmoo, веб -сайта, который содержит Codingguides и видео. Если вы хотите проверить это, анимация происходит, когда вы нажимаете контакт в меню. Кто -нибудь достиг чего -то однородного? Я думаю, что я могу самостоятельно управлять свитком, мой вопрос: как я могу контент над точкой зрения.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -scroll-up