知恵袋

知恵袋　（前に戻る）
102

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

<style>

</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'; // 少しだけ上

スクロールレールボタン
スマホとPC両方OK

① HTML（レール＋つまみ）
<div class="wrapper">

<div id="box">

</div>


<div id="scrollBar">

<div id="thumb"></div>
</div> 

</div> 

******************************
② CSS（バー＋つまみ）

/* ここから */
body {
margin: 0;
overflow: hidden;
}

.wrapper {
position: relative;
height: 100vh;
}

#box {
height: 100%;
overflow-y: auto;
padding-right: 50px;

scrollbar-width: none;
-ms-overflow-style: none;
}

#box::-webkit-scrollbar {
display: none;
}

/* レール */
#scrollBar {
position: fixed;
right: 6px;
top: 5%;
width: 32px;
height: 90%;
background: rgba(0,0,0,0.1);
border-radius: 20px;
}

/* つまみ */
#thumb {
position: absolute;
left: 4px;
top: 0;

width: 24px;
height: 80px;

background: #555;
border-radius: 20px;
opacity: 0.8;

touch-action: none;
}
/* ここまで */

******************************
③ JavaScript スマホ＋PC 両対応JS
</BODY>の直前に置く

<script>
const box = document.getElementById("box");
const bar = document.getElementById("scrollBar");
const thumb = document.getElementById("thumb");

let dragging = false;
let startY = 0;
let startTop = 0;

/* ===== 共通処理 ===== */

function syncThumb() {

const maxScroll =
box.scrollHeight - box.clientHeight;

const maxThumb =
bar.clientHeight - thumb.clientHeight;

if (maxScroll <= 0) return;

const ratio = box.scrollTop / maxScroll;

thumb.style.top =
(maxThumb * ratio) + "px";
}

box.addEventListener("scroll", syncThumb);

/* ===== スマホ ===== */

thumb.addEventListener("touchstart", e => {

dragging = true;

startY = e.touches[0].clientY;
startTop = thumb.offsetTop;

});

thumb.addEventListener("touchend", () => {
dragging = false;
});

thumb.addEventListener("touchmove", e => {

if (!dragging) return;

e.preventDefault();

moveThumb(e.touches[0].clientY);

});

/* ===== PC ===== */

thumb.addEventListener("mousedown", e => {

dragging = true;

startY = e.clientY;
startTop = thumb.offsetTop;

document.body.style.userSelect = "none";
});

document.addEventListener("mouseup", () => {
dragging = false;
document.body.style.userSelect = "";
});

document.addEventListener("mousemove", e => {

if (!dragging) return;

moveThumb(e.clientY);

});

/* ===== 共通移動処理 ===== */

function moveThumb(currentY) {

const diff = currentY - startY;

let newTop = startTop + diff;

const max =
bar.clientHeight - thumb.clientHeight;

if (newTop < 0) newTop = 0;
if (newTop > max) newTop = max;

thumb.style.top = newTop + "px";

const ratio = newTop / max;

const maxScroll =
box.scrollHeight - box.clientHeight;

box.scrollTop = maxScroll * ratio;
}
</script>

（前に戻る）

chie2.html(tvm)
<EOF>