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

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

このトピックには7件の返信が含まれ、2人の参加者がいます。5 ヶ月、 1 週前 みき さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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つ表示されたりするかも)。


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

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




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