<p>トップに戻るボタン スクリプトの <em>vanish at top</em> 部分は、<code>html { overflow-x: hidden; }</code> が原因で機能しません。 </p> <pre class="brush:php;toolbar:false;"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery が含まれています --> <button onclick="topFunction()" class="buton" id="myBtn" title="トップに戻る"><i class="fa-solid fa-angle-up"></i> ; <スクリプト> let mybutton = document.getElementById("myBtn"); window.onscroll = function() {scrollFunction()}; 関数scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "ブロック"; } それ以外 { mybutton.style.display = "なし"; } } 関数topFunction() { document.body.scrollTop = 0; // Safari の場合 document.documentElement.scrollTop = 0; // Chrome、Firefox、IE、Opera に適用されます } </スクリプト> </ボタン> CSS html、 体 { 高さ: 100%; スクロール動作: スムーズ; 位置: 相対的; オーバーフロー-x: 非表示; } 体 { 背景色:#060606; フォントファミリー: 'モンセラート'、サンセリフ; 色: #ffffff; マージン: 0; パディング: 0; } .ボタン { オーバーフロー-x: 表示されます!重要; } #myBtn { 表示: なし。 位置: 固定; 下: 20ピクセル; 右: 30ピクセル; z インデックス: 99; 境界線: なし。 概要: なし。 背景色: 赤; 色: 白; カーソル: ポインタ; パディング: 15px; 境界半径: 10px; フォントサイズ: 18px; } #myBtn:ホバー { 背景色: #333; }</pre> <p>大部分はコードです。詳細を追加してください。大部分はコードです。詳細を追加してください。大部分はコードです。詳細を追加してください。大部分はコードです。詳細を追加してください。コードです。詳細を追加してください。ほとんどコードです。詳細を追加してください。ほとんどコードです。詳細を追加してください。ほとんどコードです。詳細を追加してください。ほとんどコードです。詳細を追加してください。詳細</p> <p>HTML の overflow-x を削除すると、上部のボタンが消えますが、サイト コンテンツ全体の右側に空白が残ります</p>