如何指定div显示位置？滚动页面后点击按钮让其显示在当前视口

问题出在你给#sign设置的position: absolute上——这个定位是相对于它最近的非静态（non-static）父元素（如果所有父元素都是默认的static，那就是相对于整个文档）。所以不管页面滚动到哪里，它的top: 10vh都是相对于文档顶部的位置，自然会“回到页面顶部”。

这里有两种简单的解决思路：

方法一：使用固定定位（推荐） #

把position: absolute改成position: fixed，这样元素的定位就变成相对于当前视口了，不管页面怎么滚动，点击按钮后弹窗都会显示在当前视口的对应位置：

修改你的CSS代码：

#sign {
  position: fixed; /* 替换原来的absolute */
  top: 10vh;
  left: 35vw;
  width: 35vw;
  height: 70vh;
  background-color: black;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

这种方法不需要修改JS，直接改CSS就能生效，是最简洁的方案。

方法二：动态计算滚动位置（保留absolute定位） #

如果你因为某些原因必须保留position: absolute，可以在显示弹窗时，动态获取当前页面的滚动距离，然后设置弹窗的top值：

修改你的test1函数：

function test1() {
  const signEl = document.getElementById("sign");
  // 获取当前页面滚动的垂直距离（兼容不同浏览器）
  const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  // 设置弹窗的top为滚动距离 + 原来的10vh（转成px计算更准确）
  signEl.style.top = `${scrollDistance + window.innerHeight * 0.1}px`;
  signEl.style.visibility = "visible";
  signEl.style.opacity = "1";
}

这种方式会在每次点击按钮时，根据当前滚动位置重新计算弹窗的位置，确保它显示在当前视口的对应高度。

另外提个小优化：你可以把获取sign元素的操作抽出来，避免重复DOM查询，让代码更高效：

const signEl = document.getElementById("sign");

function test1() {
  const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  signEl.style.top = `${scrollDistance + window.innerHeight * 0.1}px`;
  signEl.style.visibility = "visible";
  signEl.style.opacity = "1";
}

function test11() {
  signEl.style.visibility = "hidden";
  signEl.style.opacity = "0";
  signEl.style.transition = "all 2s";
}

内容的提问来源于stack exchange，提问作者Sky Possible