Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › モバイルのスライドインメニューでトップへ戻るボタンを表示したい
- このトピックには7件の返信、2人の参加者があり、最後にみきにより7年、 1ヶ月前に更新されました。
-
投稿者投稿
-
-
makisushiゲスト
モバイルメニューにスライドイン(ボタン上)を選択した状態で、右下に「トップへ戻るボタン」を表示するには、どのように記述すればよいでしょうか?
-
Hidekichiゲスト
「トップへ戻るボタン」がバー内に常に表示されているのに更に右下に表示させたいということですか?
-
makisushiゲスト
はい、どちらも表示させるか、又はバーの方を消してしまうか、使ってみて感じの良い方を選んでみたいな、と思いました。よろしくご指導ください。
-
Hidekichiゲスト
公式のページをchromeのデベロッパーツールで確認していたんですが、PC等の時に入っている#page-topがスライドインナビの時は入っていないようです。
なのでなんとかして同じものを出そうとしましたがとても面倒くさいので、新たに右下のものは新設する方が早そうです。そこで一応確認ですが、スライドインナビを表示している時、footer付近に#page-topが存在するかどうかだけ確認しておいてください。
親テーマにページに戻るためのスクリプトが入っているのですが、
$(セレクタ).click(なんちゃら)
と言う書き方をしてあるので、これは流用できません。上記新設の方で行く場合に子テーマは必須なので、まだ子テーマを使われていないようでしたら導入しておいてください。サンプル(のhtml部分)がめちゃくちゃ面倒くさいので、だいたいのhtmlとcssとスクリプトだけで何とかわかるようにサンプルを作ります。
-
わいひらキーマスター
手っ取り早い方法で言えば、Scroll Back To Topのようなプラグインをインストールしてしまえば良いかと思います。
-
makisushiゲスト
Hidekichiさん、すみません、わいひらさんに紹介いただいたプラグインでやってみようと思います。
-
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の携帯エミュレーションでは問題なく動作しました。
-
みきゲスト
Hidekichiさんが書かれた
常時表示するものだと、Simplicityの機能として内包しているものを取り除かないといけないかも知れません(ボタンが2つ表示されたりするかも)。
は
管理画面>外観>カスタマイズ>レイアウト(全体・リスト)>「トップへ戻るボタンの表示」のチェックをはずすと非表示になります
-
-
投稿者投稿