以前記事にした、「ページトップ」へ戻るボタンとナビゲーションバーのメニュー項目に「サイドバー位置へジャンプ」を設置(モバイル)の改良版です。
ナビゲーションバーのメニューは指が太い人は困ったと思いますが、これで解決です。
今回の方法に変更する方は、前回のナビゲーションバーのメニュー項目は削除してください。
参考：
モバイル等の小さい画面だと「サイドバー」が「投稿一覧」や「個別記事」の下に移動してしまうため、 モバイルのときだけディスプレイ下部の一番右にハンバーガーマークが出現します。
それを押すと「サイドバー」位置にアニメーション移動します。
ただし、このボタンはモバイル(width: 768px以下)でのみ表示されます。
その左隣には「ページトップ」へ戻るボタン(下方へのスクロールが100に達したら表示される)もあります。
これをタップするとページトップにもどります。
設定方法
ダッシュボード→レイアウト→ガジェットの追加→「HTML/javascript」「＋」で追加ウィンドウが開くので、
ガジェットの配置場所はサイドバー等に移動(ドラッグ)する。
前回、「ページトップ」へ戻るボタンのみを設置した方は下記コードに変更するだけです。
<p id="page-top"><a href="#">TOP</a></p>
<p id="page-sp"><a href="#サイドバー">≡</a></p>
<style type="text/css">
/* PageTop, page-sp ボタン基本設定 */
#page-top, #page-sp {position: fixed; bottom: 15px; z-index: 10; font-size: 85%;}
#page-top {right: 60px;}
#page-sp {right: 15px;}
#page-top a{display: inline-block;}
#page-sp a{display: none;}
#page-top a, #page-sp a {text-decoration: none; background-color: #efebe5; opacity: 0.9; color: #808080; height: 40px; width: 40px; line-height: 40px; border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover, #page-sp a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}
@media screen and (min-width: 0) and (max-device-width: 768px) {
#page-top, #page-sp {bottom: 10px;}
#page-sp a{display: inline-block;}
}
/* サイドバーに空白が出てしまうので消す */
#HTML2 > div.widget-content { background-color:#f6f5f5;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
$('a[href^="#"]').click(function(){ // "#" で始まる要素を選択
var speed = 500;
var href = $(this).attr("href");
if(href == "#" || href == ""){
var target = $("html"); // そのページ
var position = target.offset().top;
}else{
var target = $(href); // href要素
var position = target.offset().top - 10; // 10 は飛び先の位置調整
}
$("body, html").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
jQueryをすでに登録している方は中ほどの jQuery v1.9.1 の登録行は不用です。
このコードはフッター等へのジャンプに簡単に応用できますので非常に便利です。
ジャンプ先のIDはそのまま使えますし、
最下部の場合は、分岐して var position = $(document).height(); にすれば OK です。
追記：2020.08.10
z-index はライトボックスとのからみで 110 から 10 に変更しました。
0 件のコメント:
コメントを投稿