ハンバーガーメニューをクリックすると、勝手に上にスクロールする。

前提・実現したいこと

jQueryを用いて、ハンバーガーメニューを作ろうとしていますが、

動作確認をしましたら、画面下にスクロールして、
spanで作ったハンバーガーメニューのアイコンをクリックすると、
ページを始めに開いた状態の、一番上にスクロールが戻ってしまいました。（スクロールせずに、メニューを開いた時の位置に留まって欲しい）

どうして画面上にスクロールしてしまうのか、原因が分からなくて困っていります。
スクロールの原因が分かる方、教えて頂きたいです。

以下のコードは、ハンバーガーメニューのソースコードになります。

該当のソースコード

HTML
1<header>
2        <div class="menu-trigger-container">
3            <a class="menu-trigger" href="#">
4                <span></span>
5                <span></span>
6                <span></span>
7            </a>
8        </div>
9        <div id="nav-content">
10            <nav>
11                <ul class="font-weight-600 font_serif">
12                    <li><a href="###">Top</a></li>
13                    <li><a href="###">Profile</a></li>
14                    <li><a href="###">Works</a></li>
15                    <li><a href="###">Contact</a></li>
16                    <li><a href="###">Blog</a></li>
17                </ul>
18            </nav>
19        </div>
20    </header>

CSS
1//ハンバーガー
2.menu-trigger-container{
3  position: fixed;
4  top: 0;
5  z-index: 9999;
6}
7
8.menu-trigger,
9.menu-trigger span{
10  display: inline-block;
11  transition: all .4s;
12  box-sizing: border-box;
13}
14
15.menu-trigger{
16  position: relative;
17
18  width: 50px;
19  height: 44px;
20}
21
22.menu-trigger span{
23  position: absolute;
24  left: 0;
25  width: 100%;
26  height: 4px;
27  background-color: $brown2;
28  border-radius: 4px;
29}
30.menu-trigger span:nth-of-type(1){
31  top: 0;
32}
33.menu-trigger span:nth-of-type(2){
34  top: 20px;
35}
36.menu-trigger span:nth-of-type(3){
37  bottom: 0;
38}
39
40.menu-trigger.active span:nth-of-type(1){
41  transform: translateY(20px) rotate(-45deg);
42}
43
44.menu-trigger.active span:nth-of-type(2){
45  opacity: 0;
46}
47
48.menu-trigger.active span:nth-of-type(3){
49  transform: translateY(-20px) rotate(45deg);
50}
51
52#nav-content{
53  display: none;
54
55  position: fixed;
56  top: 0;
57  left: 0;
58  width: 100%;
59  height: 100%;
60  background: rgba(255, 255, 255, 0.6);
61  z-index: 9998;
62}

js
1$(function(){
2    var $menu = $('.menu-trigger');
3    var $nav = $('#nav-content');
4
5    $menu.on('click', function(){
6        if(!$menu.hasClass('active')){
7            $menu.toggleClass('active');
8            $nav.show();
9        }else{
10            $menu.removeClass('active');
11            $nav.hide();
12        }
13    });
14});

補足情報（FW/ツールのバージョンなど）

Jquery 3.4.1

行動規範の内容に同意します

回答1件

ベストアンサー

こうすればよいのでは。（a要素だからスクロールする）

HTML
1            <div class="menu-trigger">
2                <span></span>
3                <span></span>
4                <span></span>
5            </div>

投稿2020/02/20 08:42