Scroll to top button created extra whitespace in the bottom

I followed some tutorial to create a CSS based floating scroll to top button. However, I noticed there is extra white space below last HTML element (e.g. last line) The height of extra whitespace matched my button height (50px)

I've also tried to add an extra div tag to encapsulate arrowUp div tag, and the gap is reduced, but there is still some smaller, but noticeable whitespace.

I wonder if there is a way to avoid the extra whitespace?

#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;
}

<div>
<p> First line. </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> Last line. </p>
</div>
<div id="arrowUp">
<a href="#"></a>
</div>

Solution

I think in your case it is better to use position: fixed; instead of sticky. Note that you'll need to set right: 0; to position the "button" at the right edge of the screen. Alternatively, you can set right: 20px; and remove the margin properties.

Quick explanation

The "extra whitespace" is present because with sticky the element is positioned to the normal flow of the document. It's like using position: relative; and setting top: -20px for example - the element will move up 20px but the original space is preserved because it "stays" in the document flow. With position: fixed; you're taking the element out of the document flow.

I suggest reading up on document flow and positioning in CSS: