モバイルのスライドインメニューでトップへ戻るボタンを表示したい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など モバイルのスライドインメニューでトップへ戻るボタンを表示したい

  • このトピックには7件の返信、2人の参加者があり、最後にみきにより7年、 1ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #50234 返信
      makisushi
      ゲスト

      モバイルメニューにスライドイン(ボタン上)を選択した状態で、右下に「トップへ戻るボタン」を表示するには、どのように記述すればよいでしょうか?

    • #50238 返信
      Hidekichi
      ゲスト

      「トップへ戻るボタン」がバー内に常に表示されているのに更に右下に表示させたいということですか?

    • #50241 返信
      makisushi
      ゲスト

      はい、どちらも表示させるか、又はバーの方を消してしまうか、使ってみて感じの良い方を選んでみたいな、と思いました。よろしくご指導ください。

    • #50246 返信
      Hidekichi
      ゲスト

      公式のページをchromeのデベロッパーツールで確認していたんですが、PC等の時に入っている#page-topがスライドインナビの時は入っていないようです。

      なのでなんとかして同じものを出そうとしましたがとても面倒くさいので、新たに右下のものは新設する方が早そうです。そこで一応確認ですが、スライドインナビを表示している時、footer付近に#page-topが存在するかどうかだけ確認しておいてください。

      親テーマにページに戻るためのスクリプトが入っているのですが、$(セレクタ).click(なんちゃら)と言う書き方をしてあるので、これは流用できません。上記新設の方で行く場合に子テーマは必須なので、まだ子テーマを使われていないようでしたら導入しておいてください。

      サンプル(のhtml部分)がめちゃくちゃ面倒くさいので、だいたいのhtmlとcssとスクリプトだけで何とかわかるようにサンプルを作ります。

    • #50261 返信
      アバター画像わいひら
      キーマスター

      手っ取り早い方法で言えば、Scroll Back To Topのようなプラグインをインストールしてしまえば良いかと思います。

    • #50262 返信
      makisushi
      ゲスト

      Hidekichiさん、すみません、わいひらさんに紹介いただいたプラグインでやってみようと思います。

    • #50263 返信
      Hidekichi
      ゲスト

      サンプル: スライドインナビが表示されている時だけpageTopボタンを右下に入れる | codepen
      ※cssはscssで書いてます。css欄のview compiledでcssに変換できます。

      もし仮に、スライドインナビのトップへ戻るボタンが不要な場合はcssで消してください。

      #footer-button-go-to-top {
        display: none;
      }

      で消えるかと思います。

      確かにわいひらさんが言うようにプラグインを入れるのが手っ取り早いですが、何かしらの条件がある場合やプラグインを読み込むことでのhttpリクエストが増えることを考えれば、最初から必ず読み込む子テーマjavascript.jsを利用するほうが何かと柔軟に対応できます。
      わいひらさん紹介のプラグインが細かく設定できるのであればそれもよいですが、常時表示するものだと、Simplicityの機能として内包しているものを取り除かないといけないかも知れません(ボタンが2つ表示されたりするかも)。

      ひとまずサンプルスクリプトは、スライドインナビがある時だけしか機能しません。これはPCで同じサイトにアクセスした時にはSimplicityのデフォルトのものが利用されるということです。

      また単純にフェードインさせるだけでは代わり映えしないので、横にスライドして表示されるようにしてあります。またスクロールを間引いています(負荷対策)。この間引きによりスクロールが止まってから処理が行われます(表示・非表示等)。

      サンプルは実機で試していないので、動作に問題があるかも知れませんがchromeの携帯エミュレーションでは問題なく動作しました。

    • #50264 返信
      みき
      ゲスト

      Hidekichiさんが書かれた

      常時表示するものだと、Simplicityの機能として内包しているものを取り除かないといけないかも知れません(ボタンが2つ表示されたりするかも)。


      管理画面>外観>カスタマイズ>レイアウト(全体・リスト)>「トップへ戻るボタンの表示」のチェックをはずすと非表示になります

7件の返信スレッドを表示中
返信先: モバイルのスライドインメニューでトップへ戻るボタンを表示したいで#50241に返信
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)