スクロールしたらページTOPボタンを表示
300pxスクロールしたら表示、特定のセクションに到達したら非表示
| 追加可能パーツ | 変更可能箇所 | 変更NG | 複数設置 | ページ複製・ クリップボード使用可否 |
|---|---|---|---|---|
|
× |
|
|
× | 〇 |
| ※留意事項 | |||
|---|---|---|---|
|
※1：特定のクラス「js-stop_sec」を付与したセクションに到達すると再び非表示になります。非表示にする必要がない場合、このクラスをつけなければ300pxスクロール後は表示されたままになります。 |
デモ
右下のページTOPボタンの挙動をご参照ください。
300pxスクロールしたらページTOPアイコンが表示され、
CTAセクション（デフォルト設定）に到達したら非表示になります。
設定方法
-
CSSをカスタムCSSに記述（共通パーツで使用する場合はCSSの構造を書き換え必須）。
-
編集画面用CSSをカスタムCSSに記述（共通パーツで使用する場合はCSSの構造を書き換え必須）。
- JavaScriptを共通フッターに配置。
-
クラス名を見本とあわせる。
- 通常通り、ページTOPアイコン用の画像パーツをフッターに配置します。
- 画像パーツを配置した行（row）にクラス名「js-page_top_row」を追加。
※必要に応じて、スタイル調整用のクラス名「page_top_row」を追加。 - ページTOPアイコンを非表示にしたいタイミングに置くセクションにクラス名「js-stop_sec」を追加。
- アニメーションは適宜カスタムCSSで変更してください。
-
新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
JS・CSS・編集画面用CSS
- JS
- CSS
- 編集画面用CSS
JavaScript
2025-05-30更新（v1.0.0）
<script>
/* -------------------------------------
スクロールしたらページTOPボタンを表示 v1.0.0
------------------------------------- */
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const pageTop = document.querySelector('.js-page_top_row .component.image'); /* ページトップアイコン */
const stopSec = document.querySelector('.js-stop_sec'); /* 非表示になるタイミングを指定（セクション） */
if (pageTop) {
/* スクロールするたびに実行 */
window.addEventListener('scroll', function () {
let scroll = window.pageYOffset; /* windowのスクロール位置を取得 */
/* 300pxスクロールしたら表示 */
if (scroll > 300) {
pageTop.classList.add('-visible'); /* CSS付与・アニメーション付与などに使用 */
} else {
/* 300pxに達してない場合は非表示 */
pageTop.classList.remove('-visible');
}
/* 非表示タイミングに指定したセクションがあった場合、ページトップアイコンの下部分が該当セクションに達したら非表示 */
if (stopSec && pageTop.getBoundingClientRect().bottom > stopSec.getBoundingClientRect().top) {
pageTop.classList.remove('-visible');
}
});
}
});
/* -------------------------------------
スクロールしたらページTOPボタンを表示 END
------------------------------------- */
</script>
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-07-26更新（v1.0.0）
/*-- スクロールしたらページTOPボタンを表示 START v1.0.0--*/
.row {
&.js-page_top_row {
.col {
.component {
&.image {
//非表示（デフォルト）
opacity: 0;
pointer-events: none;
transition: all cubic-bezier(.215,.61,.355,1) .6s;
//表示（300pxスクロール後）
&.-visible {
opacity: 1;
pointer-events: auto;
}
}
}
}
}
}
/*-- スクロールしたらページTOPボタンを表示 END --*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-07-26更新（v1.0.0）
/*-- スクロールしたらページTOPボタンを表示 編集画面用 START v1.0.0--*/
.row {
&.js-page_top_row {
.col {
.component {
&.image {
opacity: 1;
pointer-events: auto;
transition: none;
}
}
}
}
}
/*-- スクロールしたらページTOPボタンを表示 編集画面用 END --*/
※ここに到達するとpagetopが非表示になります
セクション「js-stop_sec」
ご不明な点はお気軽に
お問い合わせください
●●のお役立ち資料は
こちらから
お電話でのお問い合わせはこちら
平日 00:00~00:00
© Basic Inc. All Rights Reserved.