「一番上にスクロール」ボタンを使用すると、ページの下部に余分な空白が作成されます
<p>いくつかのチュートリアルに従って、CSS ベースのフローティング トップ スクロール ボタンを作成しました。ただし、最後の HTML 要素 (最後の行など) の下に余分な空白があることに気付きました。余分な空白の高さはボタンの高さ (50px) と一致します。 </p>
<p> arrowUp div タグを囲むように追加の div タグを追加してみました。ギャップは減少しましたが、小さいながらも目立つ空白がまだ残っています。 </p>
<p>余分な空白を避ける方法はないかと考えていました。 </p>
<pre class="brush:css;toolbar:false;">#arrowUp {
位置: スティッキー;
幅: 50ピクセル;
下: 120ピクセル;
背景: #699462;
境界半径: 10px;
アスペクト比: 1;
マージン左: 自動;
マージン右: 20px;
// margin-bottom: 150px;
}
#arrowUp a {
コンテンツ： "";
位置: 絶対;
差し込み: 25%;
変換: 移動 Y(20%) 回転(-45 度);
ボーダートップ: 5px ソリッド #fff;
ボーダー右: 5px ソリッド #fff;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<p> 最初の行。 </p>
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<p> 最後の行。 </p> </div> <div id="arrowUp"> <a href="#"></a> </div></pre> <p><br /></p>
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<br />gt;
gt;
<p> 最後の行。 </p> </div> <div id="arrowUp"> <a href="#"></a> </div></pre> <p><br /></p>
