スクロール作成プラグインTo Topで、ページトップまで移動

1ページサイトやLP、ブログなど、ページが長くなる場合があります。そんな時、トップに戻るスクロールがあると便利です。

今回は、プラグインTo Topで、スクロールしていくと、To Topアイコンが右下に表示されるページを作成します。

当サイトでは、右上に固定メニューがあり、ブログも長くなりすぎないようにしています。また、デザイン上、トップページや、アーカイブページのサムネイルなどに被りたくないので表示していませんでした。

よって、今回のDEMOは、BLOGやDEMOが長くなりすぎた場合にのみ表示するよう、8000pxスクロールしたらTO TOPアイコンが表示されるようにしています。

Aiで作成したアイコンを画像にして、表示しています。PCでは、10BLOCKS、SPでは12BLOCKSまでスクロールしたら表示されます。

まず、左サイドバーから、外観＞カスタマイズをクリックし、To Topオプション＞基本設定をクリックします。

基本設定

「スクロールオフセット(px)」を8000に設定します。「アイコン透明度(%)」を30にします。スタイルから画像を選択し、作成した画像を選択します。「画像の幅(px)」を15に設定します。

右のプレビューを確認し、サイズなどを調整します。また、タブを切り替え、タブレット、SPサイズでも確認出来ます。

項目	設定値
スクロールオフセット(px)	8000
アイコン透明度(%)	30
スタイル	画像
画像の幅(px)	15

高度な設定

アイコンのポジションを設定します。右下から、15pxのマージンで設定します。スクロールを止めて、2秒経つとアイコンを消すため、「チェックすると自動非表示が有効になります」にチェックを入れ、「自動非表示時間(秒)」を2に設定します。

項目	設定値
所在地	右下
マージンX(px)	15
マージンY(px)	15
チェックすると自動非表示が有効になります	チェック有
自動非表示時間(秒)	2

以上でTo Topの説明は終了です。細かなアニメーション設定はできませんが、簡単に設定出来ますね。今回は、スクロールオフセットは、大きく設定しましたが、Webサイトに応じて調整することが出来ます。