（←戻る）
Google HP スクロールボタン
TOPへ、BOTTOMへ

これ、動作しないのでヤメ
参考、だけ

 １．最初の導入
1-1 編集したい Google サイトのページを開く
1-2 画面右側の「挿入」タブから 「埋め込み」 を選択
1-3 「埋め込みコード」のタブに切り替える
1-4 下記のコードをすべてコピーして貼り付け

1-5 「次へ」をクリックし、プレビューを確認して「挿入」ボタンを押す
【重要】
挿入された埋め込みエリアのサイズ（青い枠線）を、スマホ画面全体を覆うように、
ページの最上部から最下部まで大きく広げてください。
（エリアが狭いと、その中だけでしかボタンが固定されなくなります）
 ２．注意点と仕様の限界
ページの最下部（BOTTOM）への移動について
Google サイト側の制限（セキュリティ）により、
埋め込みコード内のJavaScriptから外側のページ全体を直接スムーズスクロールさせることができない場合があります。
その場合、ボタンを押すと
一瞬で最上部・最下部にジャンプする挙動になります。

もしボタンの色、文字サイズ、左右の余白などを微調整したい場合は、
コード内の /* コメント */ が書いてある部分の数値を書き換えてみてください
 ３．挿入コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
/*
Googleサイトの押し下げを防ぐ魔法の設定。
パーツ全体を空中浮遊（absolute）にすることで、
既存の文字や画像を下に押し下げることなく、背景の膜として重なります。
*/
html, body {
margin: 0;
padding: 0;
height: 100%;
background: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none; /* 下にある文字やリンクのタップを邪魔しない */
}

/* ボタンの共通デザイン設定（見た目を変えたい場合はここを編集） */
.scroll-btn {
position: fixed; /* これでスマホ画面にピタッと固定されます */
top: 50vh; /* 【変更可】スマホ画面の上から50%（中央）の位置 */
transform: translateY(-50%);
z-index: 2147483647; /* 最前面に表示 */

/* ▼ ボタンの見た目の調整 ▼ */
padding: 10px 14px; /* 【変更可】ボタンの中の余白 */
background-color: #333333; /* 【変更可】ボタンの背景色（濃いグレー） */
color: #ffffff; /* 【変更可】文字の色（白） */
font-size: 14px; /* 【変更可】文字の大きさ */
font-weight: bold; /* 【変更可】文字の太さ */
border: none;
border-radius: 4px; /* 【変更可】角の丸み */
box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* 【変更可】ボタンの影 */

cursor: pointer;
pointer-events: auto; /* ボタン自体はタップできるようにする */
white-space: nowrap;
}

/* ▼ 「ページTOPへ」ボタン（左側）の調整 ▼ */
#btn-top {
left: 10px; /* 【変更可】左の端から 10px 離す */
}

/* ▼ 「ページBOTTOMへ」ボタン（右側）の調整 ▼ */
#btn-bottom {
right: 10px; /* 【変更可】右の端から 10px 離す */
}
</style>
</head>
<body>

<button id="btn-top" class="scroll-btn" onclick="scrollToTop()">ページTOPへ</button>
<button id="btn-bottom" class="scroll-btn" onclick="scrollToBottom()">ページBOTTOMへ</button>

<script>
/*
Googleサイトの仕様に合わせたスクロール命令。
長い縦長の枠（iframe）の最上部・最下部へ移動させることで、
結果的にGoogleサイト全体がスクロールします。
*/
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth' /* スムーズにスクロールさせる */
});
}

function scrollToBottom() {
window.scrollTo({
top: document.documentElement.scrollHeight || document.body.scrollHeight,
behavior: 'smooth' /* スムーズにスクロールさせる */
});
}
</script>

</body>
</html>
 ４．動作しない理由（Geminiの言い訳）2026/06/11
状況が変わらずボタンが機能しない原因は、Google サイトのシステム側（セキュリティ保護の仕組み）が、埋め込みコードから外側のページ（親ページ）を動かす命令を完全に遮断（ブロック）しているためです。
度重なるコードの修正・差し替えの手間をおかけしてしまい、本当に申し訳ありません。
Google サイトの「埋め込みコード」の中にどれだけ強力なCSSやJavaScript（window.parent など）を書いても、現在のGoogle サイトの仕様上、「画面にボタンを完全固定する」「ボタンで親ページをスクロールさせる」という2つの動作を両立させることは絶対にできない構造になっていることが分かりました。
何度も試していただいた中、大変心苦しいのですが、通常のホームページ作成（WordPressや独自のHTML/CSSファイル）とは異なり、Google サイトではこの仕様を実現する方法がありません。
理由（Google サイトのシステムの制限）
  1. ボタンが画面に固定されず移動してしまう理由
    Google サイトの埋め込み枠は「ページ内にはめ込まれた小さな窓（iframe）」です。スマホ画面をスクロールすると、その窓自体が上に流れていってしまうため、窓の中に書かれたボタンも一緒に画面の外へ流れてしまいます。
  2. ボタンを押しても上下にスクロールしない理由
    セキュリティの制限により、「埋め込み窓の中（子）」から「Googleサイトのページ全体（親）」を操作することが禁止されています。そのため、最上部や最下部へ移動するプログラム（JS）を実行しても、命令が外側に届かず無視されてしまいます。
 
 
 


（←戻る）
EOF
↑ ↓