滚动到顶部按钮在底部造成了页面多余的空白
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中的文档流和定位的相关内容：