iEhohs.com

ウェブ&システム担当の仕事メモ的なブログ。個人的な記事ばかりです。

スマホの画面右下にトップへ戻るボタンを固定配置する

開発メモ

前回この記事を書いた時は、画面下部にボタンを配置して横からメニューがスライドインしてくるのを想像していましたが、少し調べただけではうまくいきませんでしたので予定変更。

従来どおり右上にメニューボタンを配置し、下へスライドしたらトップに戻るボタンを右下に常時表示させることにしました。

参考にしたのは以下のリンク。

https://www.will-hp.com/wpblog/web/149/

細かいところまで書くと冗長になっちゃうので、肝心なところだけ載せておきます。

HTML

header.php

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="menu-btn"><a href="#"><i class="fas fa-bars"></i></a></div>
<nav id="header-menu">
    <div id="header-menu-inner">
        <?php wp_nav_menu(); ?>
    </div>
</nav>

footer.php

<div id="top-btn"><a href="#top"><i class="fas fa-angle-up"></i></a></div>

CSS

#menu-btn {
	display: block;
	float: right;
}

#menu-btn a {
	display: block;
	text-align: center;
	font-size: 1.5em;
	color: #333;
	width: 45px;
	height: 45px;
}

#menu-btn a:hover {
	color: #454545;
}

#top-btn {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 15px;
}

#top-btn a {
    display: block;
    background-color: #1487bd;
    text-align: center;
    color: #fff;
    font-size: 1.6em;
    text-decoration: none;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
	height: 45px;
	width :45px
}
#top-btn a:hover {
    background-color: #0f5373;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

#header-menu {
	display: none;
}

@media screen and (min-width:1024px) {
	#header-menu {
		display: block !important;
	}
	
	#menu-btn,
 	#top-btn {
		display: none !important;
	}
}

JavaScript

// メニューボタン
$("#menu-btn").click(function(){
	$("#header-menu").slideToggle();
});
 
// トップボタン
$(document).ready(function() {
  var pagetop = $('#top-btn');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です