ハンバーガーメニューをクリックすると、ページのトップに戻ってしまう。

Question

ハンバーガーメニューをクリックすると、ページのトップまで勝手に戻ってしまいます。クリックした位置のままメニューを表示させるのは、どうすればいいのでしょうか？
画面幅をスマホサイズにすると、下記のコードでハンバーガーメニューが表示されます。

【ハンバーガーメニューのHTML】

        <a href="/top/index.html" class="header-top">PON DESIGN</a>
        <!-- ハンバーガーメニュー -->
        <input id="menu" type="checkbox">
        <label for="menu" class="open menu-btn"><div class="line"></div><div class="line"></div><div class="line"></div></label>
        <label for="menu" class="back menu-btn"></label>
        
        <aside class="nav-menu">
        <label for="menu" class="close menu-btn">×</label>
        <!-- メニュー(SP) -->
        <nav class="drawer-content">
        <ul class="drawer-list">
        <li class="drawer-item">
        <a class="link-item" href="/news/news.html">NEWS</a>
        </li>
        <li class="drawer-item">
        <a class="link-item" href="/service/service.html">SERVICE</a>
        </li>
        <li class="drawer-item">
        <a class="link-item" href="/works/works.html">WORKS</a>
        </li>
        <li class="drawer-item">
        <a class="link-item" href="/company/company.html">COMPANY</a>
        </li>
        <li class="drawer-item">
        <a class="link-item" href="/recruit/recruit.html">RECRUIT</a>
        </li>
        <li class="drawer-item">
        <a class="link-item" href="/contact/contact.html">CONTACT</a>
        </li>
        </ul>
        </nav>
        </aside>
        <!-- メニュー(PC) -->
        <header class="header-nav">
        <nav>
        <ul class="nav-list">
        <li class="nav-item">
        <a href="/news/news.html">NEWS</a>
        </li>
        <li class="nav-item">
        <a href="/service/service.html">SERVICE</a>
        </li>
        <li class="nav-item">
        <a href="/works/works.html">WORKS</a>
        </li>
        <li class="nav-item">
        <a href="/company/company.html">COMPANY</a>
        </li>
        <li class="nav-item">
        <a href="/recruit/recruit.html">RECRUIT</a>
        </li>
        <li class="nav-item">
        <a href="/contact/contact.html">CONTACT</a>
        </li>
        </ul>
        </nav>
        </header>
    </aside>

【ハンバーガーメニューのCSS】

.header-nav {
  display: none;
  }
  
  .header {
  background-image: url("/images/SP-TOP/[e-mail]");
  background-size: cover;
  height: 812px;
  }
  
  .drawer-list {
  display: none;
  }
  .header .header-top {
  color: white;
  display: block;
  width: 130px;
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0 0 15px;
  text-decoration: none;
  position: absolute;
  }
  
  .header .header-top:hover {
  opacity: 0.8;
  }
  
  .header .header-active {
  display: none;
  }
  
  .header .header-img-active {
  display: none;
  }
  
  /* ハンバーガーメニュー */
  .open, .close {
  display: none;
  }
  
  /* 三本線 */
  .line {
  width: 30px;
  height: 2px;
  background-color: white;
  margin: 6px;
  }
  
  /* 左に隠す */
  input[type="checkbox"] {
  position: absolute;
  left: -50vw;
  }
  
  @media (max-width: 1150px) {
  .open, .close {
  display: block;
  }
  
  .close {/* ×のデザイン */
  font-size: 40px;
  color: white;
  position: absolute;
  right: 30px;
  top: 10px;
  }
  
  .open {
  position: absolute;
  right: 30px;
  top: 15px;
  position: fixed;
  }
  .drawer-list {
  display: block;
  }
  
  /* コンテンツを隠す */
  .nav-menu {
  position: absolute;
  right: -30%;
  height: 812px;
  transition: all 0.2s;
  background: url(/images/SP-TOP/[e-mail]);
  z-index: 1000;
  width: 30%;
  }
  
  .link-item {
  color: white;
  text-decoration: none;
  margin-top: 100px;
  margin-bottom: -50px;
  display: block;
  text-align: center;
  }
  
  .link-news {
  margin-top: 100px;
  }
  
  .link-item:hover {
  text-decoration: underline;
  }
  
  input[type="checkbox"]:checked ~ .nav-menu {
  right: 0;
  }
  
  input[type="checkbox"]:checked ~ .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0, 0.8);
  z-index: 100;
  }
  
  }
  
  body.hidden{
  overflow: hidden;
  background: red;
  }

  body {
    background: red;
    height: 5000px;
  }
  

【ハンバーガーメニューのJS(hiddenクラスのつけ外しで、メニュー表示時bodyをスクロールさせないように固定している】

$(function() {

    
    $(function() {
    　$('.menu-btn').click(function() {
    if($('body').hasClass('hidden')) {
    $('body').removeClass('hidden');
    } else {
    $('body').addClass('hidden');
    }
    });
    });
    
    });
   

Comments

[AsukaKobayashi]

jQueryの記述を見ると.menu-btnをクリックしたとき、bodyにclassをつける動作が書かれているようですがHTMLの記述に.menu-btnがなく、質問内容のコードのみでは起きている問題が確認できないようです。

起きている問題を確認できるようにHTMLを追記していただくと解決が早いかもしれません。

また、jQueryの記述上、`});`が１つ多いようですので、修正いただけるとありがたいです。

[Goethe]

ご指摘ありがとうございます。該当箇所修正いたしました。

[AsukaKobayashi]

修正いただきありがとうございます。
修正後のコードで確認したところ、bodyにclassがつく動作は確認できましたが、
トップに戻る現象は確認できませんでした。

メニューボタンのjQueryの動作の問題というよりは、ページのHTML/CSSに起因する問題のようですね。

記載いただいていない部分のHTML/CSSが重要な役割を果たしている可能性があります。

[Goethe]

情報追記させていただきます。

【ヘッダー（ハンバーガーメニュー）に関するHTML全般】
<!-- ヘッダー -->
<div class="header">
<a href="/top/index.html" class="header-top">PON DESIGN</a>
<!-- ハンバーガーメニュー -->
<input id="menu" type="checkbox">
<label for="menu" class="open menu-btn"><div class="line"></div><div class="line"></div><div class="line"></div></label>
<label for="menu" class="back menu-btn"></label>

<aside class="nav-menu">
<label for="menu" class="close menu-btn">×</label>
<!-- メニュー(SP) -->
<nav class="drawer-content">
<ul class="drawer-list">
<li class="drawer-item">
<a class="link-item" href="/news/news.html">NEWS</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/service/service.html">SERVICE</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/works/works.html">WORKS</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/company/company.html">COMPANY</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/recruit/recruit.html">RECRUIT</a>
</li>
<li class="drawer-item">
<a class="link-item" href="/contact/contact.html">CONTACT</a>
</li>
</ul>
</nav>
</aside>
<!-- メニュー(PC) -->
<header class="header-nav">
<nav>
<ul class="nav-list">
<li class="nav-item">
<a href="/news/news.html">NEWS</a>
</li>
<li class="nav-item">
<a href="/service/service.html">SERVICE</a>
</li>
<li class="nav-item">
<a href="/works/works.html">WORKS</a>
</li>
<li class="nav-item">
<a href="/company/company.html">COMPANY</a>
</li>
<li class="nav-item">
<a href="/recruit/recruit.html">RECRUIT</a>
</li>
<li class="nav-item">
<a href="/contact/contact.html">CONTACT</a>
</li>
</ul>
</nav>
</header>

【ヘッダー（ハンバーガーメニュー）に関するCSS全般】
.header-nav {
display: none;
}

.header {
background-image: url("/images/SP-TOP/[e-mail]");
background-size: cover;
height: 812px;
}

.drawer-list {
display: none;
}
.header .header-top {
color: white;
display: block;
width: 130px;
font-size: 18px;
font-weight: bold;
padding: 20px 0 0 15px;
text-decoration: none;
position: absolute;
}

.header .header-top:hover {
opacity: 0.8;
}

.header .header-active {
display: none;
}

.header .header-img-active {
display: none;
}

/* ハンバーガーメニュー */
.open, .close {
display: none;
}

/* 三本線 */
.line {
width: 30px;
height: 2px;
background-color: white;
margin: 6px;
}

/* 左に隠す */
input[type="checkbox"] {
position: absolute;
left: -50vw;
}

@media (max-width: 1150px) {
.open, .close {
display: block;
}

.close {/* ×のデザイン */
font-size: 40px;
color: white;
position: absolute;
right: 30px;
top: 10px;
}

.open {
position: absolute;
right: 30px;
top: 15px;
}
.drawer-list {
display: block;
}

/* コンテンツを隠す */
.nav-menu {
position: absolute;
right: -30%;
height: 812px;
transition: all 0.2s;
background: url(/images/SP-TOP/[e-mail]);
z-index: 1000;
width: 30%;
}

.link-item {
color: white;
text-decoration: none;
margin-top: 100px;
margin-bottom: -50px;
display: block;
text-align: center;
}

.link-news {
margin-top: 100px;
}

.link-item:hover {
text-decoration: underline;
}

input[type="checkbox"]:checked ~ .nav-menu {
right: 0;
}

input[type="checkbox"]:checked ~ .back {
position: absolute;
width: 100%;
height: 100%;
background: rgb(0, 0, 0, 0.8);
z-index: 100;
}

}

body.hidden{
overflow: hidden;
background: red;
}

【JSファイル全て】
$(function() {
$(window).scroll(function (){
$('.fadein').each(function(){
var targetElement = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > targetElement - windowHeight + 200){
$(this).css('opacity','1');
$(this).css('transform','translateY(0)');
}
});
});
$('.slider').slick({
autoplay: true,
dots: true,
});
});

$(function() {
　$('.menu-btn').click(function() {
if($('body').hasClass('hidden')) {
$('body').removeClass('hidden');
} else {
$('body').addClass('hidden');
}
});
});

$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});

[Goethe]

お世話になります。質問文を編集したので、そちらから御確認いただけると助かります。

Answer 1

inputにフォーカスされていると思います。
以下のようにしてフォーカスできないようにしてしまうのが、お手軽な対策だと思います。

input[type="checkbox"] {
display: none;
}

Comments

[Goethe]

回答ありがとうございます。
おかげさまで目的通りの動作ができました。本当に助かりました。

[Lhankor_Mhy]

お役に立てて何よりです