スマホ画面に上へボタンをつける

ページ名:スマホ画面に上へボタンをつける

実装画面例

 

設定方法

※ 以下の手順の1,2両方必要です。

1. CSSの設定

[管理画面] -  [デザイン設定] 画面にある

CSSカスタマイズ(上級者向け)のフォームにCSSを記述してください。

 

#page-top {
    position: fixed;
    bottom: {画面したからの距離};
    right: {画面右からの距離};
}

  1. 画面したからの距離 - 半角数字で設定してください。単位はピクセル 例 20px
  2. 画面右からの距離 - 半角数字で設定してください。単位はピクセル 例 20px

記述例

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

2. HTML追加

(非管理画面)で[編集] - [メニューを編集する] でメニューの編集画面に遷移してください。

ソースモードに切り替えて、一番下などに以下の記述をしてください。

<div id="page-top" class="uk-visible-small">
    <a href="#" class="uk-icon-button uk-icon-chevron-circle-up" data-uk-smooth-scroll=""><span class="uk-hidden">&nbsp;</span></a>
</div>