![](https://cxg-design.jp/wp-content/uploads/2024/03/8e4e5f9bd955bfdd31bb5e8f356eb2cb.png)
スクロール作成プラグインTo Topで、ページトップまで移動
1ページサイトやLP、ブログなど、ページが長くなる場合があります。そんな時、トップに戻るスクロールがあると便利です。
今回は、プラグインTo Topで、スクロールしていくと、To Topアイコンが右下に表示されるページを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/03/fa9eb8d6e9b4e9ef15fcdac0c19fcb86.png)
出典 : To Top
今回のDEMOは、スクロールしていくとTO TOPアイコンが右下に表示されます。
当サイトでは、右上に固定メニューがあり、ブログも長くなりすぎないようにしています。また、デザイン上、トップページや、アーカイブページのサムネイルなどに被りたくないので表示していませんでした。
よって、今回のDEMOは、BLOGやDEMOが長くなりすぎた場合にのみ表示するよう、8000pxスクロールしたらTO TOPアイコンが表示されるようにしています。
Aiで作成したアイコンを画像にして、表示しています。PCでは、10BLOCKS、SPでは12BLOCKSまでスクロールしたら表示されます。
![](https://cxg-design.jp/wp-content/uploads/2024/03/totop001-2.png)
今回設置するアイコン画像
まず、左サイドバーから、外観>カスタマイズをクリックし、To Topオプション>基本設定をクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/03/70943d384e14aa09a11d848b5ab07dba.png)
外観>カスタマイズをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/03/c3bdd0e4eb70f4a1e982c1952fef2288.png)
To Top オプションをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/03/229e7e2ad29d9d666130631c82afbae4.png)
基本設定をクリック
基本設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/dbada895284b951fcc52ce5a9524c762.png)
「スクロールオフセット(px)」を8000に設定します。「アイコン透明度(%)」を30にします。スタイルから画像を選択し、作成した画像を選択します。「画像の幅(px)」を15に設定します。
右のプレビューを確認し、サイズなどを調整します。また、タブを切り替え、タブレット、SPサイズでも確認出来ます。
![](https://cxg-design.jp/wp-content/uploads/2024/03/ae8e753d0fcdb81152a53d9a2d372f8c.png)
「画像を選択」をクリックし、画像を選択
![](https://cxg-design.jp/wp-content/uploads/2024/03/866c54eaa57afbc899f11303350fadec.png)
画像が挿入されます。「画像の幅(px)」を15に設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/c5bd1764135e7a2f6c16adaae4b64688.png)
右のプレビューで表示を確認
![](https://cxg-design.jp/wp-content/uploads/2024/03/ca6b8f73fdc5b44cf4d6c0e8042e423e.png)
タブを切り替え、タブレット、SPサイズでも確認
項目 | 設定値 |
---|---|
スクロールオフセット(px) | 8000 |
アイコン透明度(%) | 30 |
スタイル | 画像 |
画像の幅(px) | 15 |
高度な設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/369a3c3342c98a076d7370d5af579394.png)
アイコンのポジションを設定します。右下から、15pxのマージンで設定します。スクロールを止めて、2秒経つとアイコンを消すため、「チェックすると自動非表示が有効になります」にチェックを入れ、「自動非表示時間(秒)」を2に設定します。
項目 | 設定値 |
---|---|
所在地 | 右下 |
マージンX(px) | 15 |
マージンY(px) | 15 |
チェックすると自動非表示が有効になります | チェック有 |
自動非表示時間(秒) | 2 |
以上でTo Topの説明は終了です。細かなアニメーション設定はできませんが、簡単に設定出来ますね。今回は、スクロールオフセットは、大きく設定しましたが、Webサイトに応じて調整することが出来ます。