锚点定位<div>时如何阻止页面滚动（仅支持HTML和CSS）

看起来你遇到的是纯CSS切换内容时的锚点滚动问题，这个在只用HTML/CSS实现内容显隐时超常见！浏览器默认会把锚点目标元素滚动到视口内，咱们用纯CSS的小技巧就能解决，完全不用JS，完美适配你的场景~

问题根源 #

你现在用:target伪类控制.workingGif的显隐，点击带href="#id"的a标签时，浏览器会自动滚动到对应id元素的文档流位置，这就是滚动的原因。要阻止它，核心是让浏览器找不到需要滚动的“文档流位置”，或者改变锚点的滚动计算规则。

方案1：给目标div设置fixed定位（最适配你的现有代码） #

因为你的.workingGif是用来展示内容的容器，把它设为position: fixed后，它会脱离文档流，浏览器就不会因为锚点触发滚动了，同时完全不影响原来的显隐逻辑。

修改你的CSS代码：

.linkGif { 
  position: absolute; 
  z-index: 3;
  /* 可以加个top值避免被内容挡住，比如top: 20px; */
  top: 20px;
}
.linkGif.pause{ 
  left: 50px; 
}
.workingGif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  /* 保留你原来的布局逻辑，内部img的absolute定位完全不受影响 */
}
.workingGif:target { 
  display: block; 
}

HTML部分完全不用改，还是你原来的结构就行。点击a标签时，浏览器找不到.workingGif在文档流中的位置，就不会触发滚动，同时:target依然能正常控制内容显隐。

方案2：隐藏锚点元素+兄弟选择器（适合需要保留文档流的场景） #

如果你的.workingGif必须留在文档流里（比如要和页面其他元素联动布局），可以把锚点目标换成一个看不见的空元素，然后用兄弟选择器来控制内容显隐：

修改后的HTML #

<a class="linkGif play" href="#playingGif-trigger" >▶</a>
<a class="linkGif pause" href="#pausedGif-trigger" > ||</a>

<!-- 完全隐藏的锚点触发元素，放在文档流顶部 -->
<span id="playingGif-trigger" class="anchor-trigger"></span>
<div class="workingGif playingGif">
  <img style="left: 5%;" src="https://files.catbox.moe/hvuk3n.gif" height="35%" alt="gir" loading="lazy"/>
  <img style=" right: 12.5%;" src="https://files.catbox.moe/6hue79.gif" height="20%" alt="Kirby" loading="lazy"/>
</div>

<span id="pausedGif-trigger" class="anchor-trigger"></span>
<div class="workingGif pausedGif">
  <img style="left: 5%;" src="https://files.catbox.moe/zi3kte.png" height="35%" alt="gir" loading="lazy"/>
  <img style=" right: 12.5%;" src="https://files.catbox.moe/tl8gnc.png" height="20%" alt="Kirby" loading="lazy"/>
</div>

对应的CSS #

.linkGif { 
  position: absolute; 
  z-index: 3;
  top: 20px;
}
.linkGif.pause{ 
  left: 50px; 
}
/* 隐藏锚点触发元素，不占任何空间 */
.anchor-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* 初始隐藏所有内容容器 */
.workingGif {
  display: none;
  /* 保留你原来的布局样式 */
}
/* 通过锚点触发元素的:target控制兄弟容器显示 */
#playingGif-trigger:target ~ .playingGif,
#pausedGif-trigger:target ~ .pausedGif {
  display: block;
}

这个方案里，点击a标签时浏览器会滚动到隐藏的.anchor-trigger位置（页面顶部，完全看不见），用户根本感知不到滚动，同时也能正常触发内容显隐。

为什么你之前的100vh设置没用？ #

你之前试过把div设为100vh，但只设置高度没脱离文档流，浏览器还是能找到它在文档流中的位置，所以依然会触发滚动。用上面的两种方法就能彻底解决这个问题啦~

内容来源于stack exchange