Die Schaltfläche „Nach oben scrollen' erzeugt zusätzlichen Leerraum am unteren Rand der Seite

Question

Ich habe einige Tutorials befolgt, um eine CSS-basierte schwebende Schaltfläche zum Scrollen nach oben zu erstellen. Allerdings ist mir aufgefallen, dass unter dem letzten HTML-Element (z. B. der letzten Zeile) zusätzlicher Leerraum vorhanden ist. Die Höhe des zusätzlichen Leerraums entspricht meiner Schaltflächenhöhe (50 Pixel).

Ich habe auch versucht, ein zusätzliches Div-Tag hinzuzufügen, um das ArrowUp-Div-Tag einzuschließen, und die Lücke wurde verringert, aber es gibt immer noch einen kleinen, aber auffälligen Leerraum.

Ich habe mich gefragt, ob es eine Möglichkeit gibt, den zusätzlichen Leerraum zu vermeiden?

#arrowUp {
  Position: klebrig;
  Breite: 50px;
  unten: 120px;
  Hintergrund: #699462;
  Randradius: 10px;
  Seitenverhältnis: 1;
  Rand links: auto;
  Rand rechts: 20px;
// margin-bottom: 150px;

}

#arrowUp ein {
  Inhalt: "";
Position: absolut;
  Einsatz: 25 %;
  transformieren: translatorY(20%) rotieren(-45deg);
  border-top: 5px solide #fff;
  border-right: 5px solide #fff;
}

<div>
<p> Erste Zeile. </p>
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<p> Letzte Zeile. </p>
</div>
<div id="arrowUp">
<a href="#"></a>
</div>

Answer 1

我认为在你的情况下，最好使用position: fixed;而不是sticky。请注意，你需要设置right: 0;来将“按钮”定位在屏幕的右边缘。或者，你可以设置right: 20px;并删除margin属性。

快速解释

“额外的空白”之所以存在，是因为使用sticky时，元素被定位到文档的正常流程中。这就像使用position: relative;并设置top: -20px一样-元素会向上移动20px，但原始空间被保留，因为它“停留”在文档流中。而使用position: fixed;会将元素从文档流中取出。

---

我建议阅读关于CSS中的文档流和定位的相关内容：

• 解释正常流程
• CSS position属性和值