如何在视口上方添加内容并实现向上滚动动画，避免页面元素被向下挤压

我明白你的需求啦——点击按钮后，联系内容从视口上方滑进来，同时页面滚动到顶部，但不想让原来的页面内容被往下挤。你现在的问题出在#top用了relative定位，它还是在正常文档流里，修改高度自然会把下面的元素推下去。咱们换个思路，用脱离文档流的定位来解决这个问题：

修改核心思路 #

把#top设置为fixed定位，让它完全脱离正常文档流，这样它的显示/隐藏就不会影响下面的页面元素。然后通过调整top属性来实现从视口上方滑入的动画，而不是修改高度。

修改后的完整代码 #

CSS 部分

* {
  margin: 0;
  box-sizing: border-box;
}

.box {
  height: 100dvh;
}

#top {
  position: fixed; /* 改为fixed定位，脱离文档流 */
  top: -100dvh; /* 初始状态在视口上方 */
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: auto;
  background: #ddd;
  transition: top 0.8s ease; /* 切换top属性实现动画 */
}

/* 显示表单时，把top设为0，滑入视口 */
.is-show-contact #top {
  top: 0;
}

img {
  width: 100%;
}

JavaScript 部分

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")) {
    // 滚动到顶部，保持平滑滚动效果
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }
};

els(".btn-contact").forEach((elBtn) => {
  elBtn.addEventListener("click", toggleContact);
});

HTML 部分（无需修改）

<div id="top">
  <h2>CONTACT FORM</h2>
   <img src = "https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=256">
  <button class="btn-contact" type="button">Close</button>
</div>

<div class="box">
  <p>Scroll down as well...</p>
  <button class="btn-contact" type="button">Contact</button>
</div>

<div class="box">
  <button class="btn-contact" type="button">Contact</button>
</div>

<div class="box">
  <button class="btn-contact" type="button">Contact</button>
</div>

<div class="box">
  <button class="btn-contact" type="button">Contact</button>
</div>

效果说明 #

• 初始状态下，#top在视口上方完全看不到，而且不会占用文档空间，下面的.box元素正常排列。
• 点击Contact按钮后，body添加is-show-contact类，#top的top从-100dvh过渡到0，平滑滑入视口；同时页面平滑滚动到顶部，和你想要的效果一致。
• 点击Close按钮时，#top又滑回视口上方，页面可以继续正常滚动。

这种实现方式和你提到的网站思路一致——用脱离文档流的固定定位避免挤压原有内容，通过位置属性的过渡实现滑入动画。

备注：内容来源于stack exchange，提问作者Jack the man