知恵袋　（前に戻る）
102

 **********　CSS　***************
「上に戻る」ボタン

<style>
<!--

/* CSSだけで常時表示する「上に戻る」ボタン */
#backToTopCSS {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999; /* ← ここを100 → 99999に変更 */
display: block;
background-color: #333;
color: #fff;
padding: 10px 15px;
border-radius: 50%;
font-size: 20px;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#backToTopCSS:hover {
background-color: #555;
}

-->
</style>

**********　HTML　***************

<body id="top">
</body>のすぐ上に
<a href="#top" id="backToTopCSS" title="上に戻る">↑</a>

この z-index: 99999
z-index: 2147483647（＝2,147,483,647）は、
理論上ブラウザで設定できる最大値に近い数値
「画面下へ行く」のボタンを
別のcssとhtmlで追記

<style>
/* CSSだけで常時表示する「下へ行く」ボタン */
#goToBottomCSS {
position: fixed;
bottom: 20px; /* 上へボタンと同じ高さに置く */
left: 20px; /* 左下に配置 */
z-index: 99999; /* ← ここを100 → 99999に変更 */
display: block;
background-color: #333;
color: #fff;
padding: 10px 15px;
border-radius: 50%;
font-size: 20px;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#goToBottomCSS:hover {
background-color: #555;
}
</style>

***** HTML　</body>のすぐ上に(scriptの上に) *****

～本文～
</p>

<!-- 「下へ行く」ボタン（どこに置いても表示位置は左下） -->
<a href="#bottom" id="goToBottomCSS" title="下へ行く">↓</a>

<!-- 「上へ戻る」ボタン（すでに実装済み） -->
<a href="#top" id="backToTopCSS" title="上に戻る">↑</a>

<!-- ジャンプ先を空のアンカーで定義 -->
<a id="bottom"></a>

<div id="content">
<!-- ←あなたの本文をここに -->
</div>

<script>
*
～script文～
*
</body>

css記載例

#backToTopCSS {
position: fixed;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
border-radius: 50%;
}
これは、通常の状態（マウスが乗っていないとき）のスタイルを指定します。

#backToTopCSS:hover {
background-color: gray;
transform: scale(1.1);
}
これは、マウスカーソルをボタンの上に乗せたとき（hover状態） に変わるスタイルを指定します。

一般的には、両方セットで書きます：
#backToTopCSS {
background-color: black;
color: white;
}
#backToTopCSS:hover {
background-color: orange;
}
こうすることで、「通常は黒」「マウスを乗せるとオレンジ」になります。

#backToTopCSS {
position: fixed;
bottom: 20px;
right: 20px;
}
このような指定をすると：
position: fixed; → 画面（ブラウザウィンドウ）に対して固定表示（スクロールしても動かない）
bottom: 20px; → 画面の下端から20px上に配置
right: 20px; → 画面の右端から20px左に配置

もし値を変えると？
bottom: 50px;　下端から50px上に上がる（もっと上）
bottom: 0; 下端ピッタリにくっつ
right: 40px; 右端から少し左に寄る（余白が広くなる）
left: 20px; 左下に表示される（rightを削除して使用）

border-radius: 50%;の意味は？
border-radius: 10px; → 少し丸い角
border-radius: 25%; → やや丸い四角
border-radius: 50%; → 円形（または楕円形、要素が長方形の場合）

ボタンの上下位置の調整
script追記
広告の位置を避ける

段差をなくしたいなら、
両方の bottom 値を同じにすればOKです。
たとえば、次のようにします：

<script>
window.addEventListener('load', function() {
const btn1 = document.getElementById('backToTopCSS');
const btn2 = document.getElementById('goToBottomCSS');
const adOffset = window.innerHeight * 0.12; // 広告分の高さ
btn1.style.bottom = adOffset + 'px';
btn2.style.bottom = adOffset + 'px'; // ← 同じ値にする
});
</script>


これで、左右の「↑」「↓」が同じ高さの水平ライン上に並びます。


④ もし「上下に少し段差を残したい」なら？

たとえば少しだけ（見やすい程度に）差をつけたいなら、
+ 20 や + 30 程度にして調整できます。

btn1.style.bottom = adOffset + 'px';
btn2.style.bottom = (adOffset + 30) + 'px'; // 少しだけ上

（前に戻る）

chie2.html(tvm)
<EOF>


↑