ハンバーガーメニューを閉じたときに、上に戻らなくするようにしたい。

Question

前提・実現したいこと

ハンバーガーメニューを閉めた時に、スクロールした所と同じ場所で閉じれるようにしたいのですが、どうやっても一番上に戻ってしまうので、何かアドバイスいただけたら嬉しいです。

該当のソースコード

<header>
      <div id="headerTop">

        <div id="headerTopContent">
          <h2 id="logo">Shiro</h2>

          <a href="#" id="menuButton">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
          </a>

          <nav id="nav">
            <ul>
              <li><a href="#">menu1</a></li>
              <li><a href="#">menu2</a></li>
              <li><a href="#">menu3</a></li>
              <li><a href="#">menu4</a></li>
              <li><a href="#">menu5</a></li>
            </ul>
          </nav>
        </div>
      </div>
        <h1>ロゴ</h1>
        <p>キャプション</p>
    </header>

#headerTop {
  width: 100%;
  height: 65px;
  position: absolute;
  top: 40px;
  left: 0;
}
#headerTop.pst-change{
  position: fixed;
  top: 0;
}
#headerTopContent {
  width: 70%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
#menuButton {
  display: inline-block;
  height: 35px;
  width: 35px;
  position: relative;
  z-index: 2;
}

.bar {
  height: 1px;
  width: 60%;
  background-color: white;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.bar:nth-of-type(1){
  transform: translate(-50%, -5px);
}
.bar:nth-of-type(3){
  transform: translate(-50%, 5px);
}

#menuButton.active div:nth-of-type(1){
  transform: rotate(45deg) translate(-36%, 14px);
}
#menuButton.active div:nth-of-type(2){
  opacity: 0;
}
#menuButton.active div:nth-of-type(3){
  transform: rotate(-45deg) translate(-69%, -8px);
}

#nav {
  height: 1400px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  position: absolute;
  z-index: 100;
  top: 26px;
  right: -200px;
  bottom: 0;
  left: -200px;
  background-color: rgba(255, 255, 255, .9);
  text-align: center;
  margin-top: 40px;
}
#nav a {
  color: black;
}
#nav li{
  border-bottom: 1px solid #CCCCCC;
  font-size: 18px;
  color: #2B2B2B;
  padding: 80px 0;
  z-index: 20;
}

#nav.active {
  opacity: 1;
  visibility: visible;
}
#headerTop.scroll-nav {
  background-color: white;
  border-bottom: 1px solid grey;
}
#logo.scroll-nav {
  color: black;
  background: white;
}
.bar.show {
  background-color: black;
}

'use strict';
{
  const btn = document.getElementById("menuButton");
  const nav = document.getElementById("nav");

  btn.addEventListener("click", () => {
    btn.classList.toggle("active");
    nav.classList.toggle("active");
    });

  document.addEventListener("scroll", () => {

    const scrollY = window.scrollY;
    const menu = document.getElementById("headerTop");
    const logo = document.getElementById("logo");
    const btn = document.getElementById("menuButton");
    const headerTop = document.getElementById("headerTop");

    menu.classList.toggle("scroll-nav", scrollY > 350);
    logo.classList.toggle("scroll-nav", scrollY > 350);
    btn.classList.toggle("scroll-nav", scrollY > 350);
    showBar();
    headerTop.classList.toggle("pst-change", scrollY > 40);
    });

    function showBar() {
      const bar = document.querySelectorAll(".bar");
      bar.forEach(function (bars) {
        if(scrollY > 350){
          bars.classList.add("show");
        }else{
          bars.classList.remove("show");
        }
      });
    }
}

Answer 1

画面遷移させないならhref属性自体取っ払うか、Event.preventDefault()を入れるかでも対応可能です。

取っ払う

<a id="a">aaaaaaaaaaaaaaa</a>

preventDefault()

<a href="#" id="a">aaaaaaaaaaaaaaa</a>
<script>
a.addEventListener("click", function(e){
	e.preventDefault();
}); 
</script>

私はhref属性取っ払います。

Comments

[Kinomaru]

アドバイスありがとうございます!
href属性を消したら、きちんと動作するようになりました‼︎