滾動到頂部按鈕在底部造成了頁面多餘的空白
P粉226642568
2023-08-13 19:52:48
<p>我按照一些教程創建了一個基於CSS的浮動滾動到頂部按鈕。然而，我注意到最後一個HTML元素（例如最後一行）下面有額外的空白空間。額外的空白空間的高度與我的按鈕高度（50px）相符。 </p>
<p>我還嘗試添加一個額外的div標籤來封裝arrowUp div標籤，間隙減少了，但仍然有一些較小但明顯的空白空間。 </p>
<p>我想知道是否有一種方法可以避免額外的空白空間？ </p>
<pre class="brush:css;toolbar:false;">#arrowUp {
position: sticky;
width: 50px;
bottom: 120px;
background: #699462;
border-radius: 10px;
aspect-ratio: 1;
margin-left: auto;
margin-right: 20px;
// margin-bottom: 150px;
}
#arrowUp a {
content: “”;
position: absolute;
inset: 25%;
transform: translateY(20%) rotate(-45deg);
border-top: 5px solid #fff;
border-right: 5px solid #fff;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<p> 第一行。 </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> 最後一行。 </p>
</div>
<div id="arrowUp">
<a href="#"></a>
</div></前>
<p><br />></p>
我認為在你的情況下，最好使用
position: fixed;而不是sticky。請注意，你需要設定right: 0;來將「按鈕」定位在螢幕的右邊緣。或者，你可以設定right: 20px;並刪除margin屬性。快速解釋
「額外的空白」之所以存在，是因為使用
sticky時，元素被定位到文件的正常流程中。這就像使用position: relative;並設定top: -20px一樣-元素會向上移動20px，但原始空間被保留，因為它「停留」在文件流中。而使用position: fixed;會將元素從文件流中取出。我建議閱讀關於CSS中的文檔流和定位的相關內容：