teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップスクロールに関する質問スムーススクロールとハンバーガーメニュー内リンクをクリックで閉じる

編集履歴

回答編集履歴

11

調整

2019/11/29 01:33

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  追記修正版
2
2
  ----
3
- __< 小出しされた情報で無効になった修正もあり見辛くなっていたので丸々書き換えました。 >__
3
+ __< 小出しされた情報で無効になった修正もあり見辛くなっていたので整理して書き直しました。 >__
4
4
 
5
5
  ### アンカーの問題
6
6
  アンカーリンクはclassではなくIDで指定する必要があります。

10

文章調整

2019/11/29 01:33

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,5 +1,6 @@
1
1
  追記修正版
2
2
  ----
3
+ __< 小出しされた情報で無効になった修正もあり見辛くなっていたので丸々書き換えました。 >__
3
4
 
4
5
  ### アンカーの問題
5
6
  アンカーリンクはclassではなくIDで指定する必要があります。
@@ -107,4 +108,4 @@
107
108
  ```
108
109
 
109
110
  ### CodePen 検証
110
- https://codepen.io/isscode/pen/pooMBJL
111
+ [https://codepen.io/isscode/pen/pooMBJL](https://codepen.io/isscode/pen/pooMBJL)

9

調整

2019/11/29 01:32

投稿

iss
iss

スコア506

answer CHANGED
@@ -73,7 +73,7 @@
73
73
  </ul>
74
74
  </nav>
75
75
 
76
- <div id="work" style="margin:50px 0 100vh 0;">#work 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
76
+ <div id="work" style="margin:50px 0 100vh 0;">#work 各スクロールしたい階層</div>
77
77
  <div id="about" style="margin-bottom:100vh;">#about 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
78
78
  <div id="contact" style="margin-bottom:100vh;">#contact 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
79
79
 

8

CSS追記に伴うコード調整

2019/11/29 01:24

投稿

iss
iss

スコア506

answer CHANGED
@@ -12,94 +12,99 @@
12
12
 
13
13
  ### ハンバーガーメニューが閉じれない問題
14
14
  閉じる時のクリック判定が、開く時の判定の中にあるため動作していません。
15
- ```JavaScript
16
- $('#nav a').on('click', function() {
17
- $('#nav').toggleClass('active');
18
- $(".Toggle").toggleClass('active');
19
- })
20
- ```
21
- の部分は全部カットして、
22
- `$('a[href^=#]').click(function() {` の中に全部移動しましょう。
23
15
 
16
+ ~~$('#nav a').on('click', function() {~~
17
+ ~~ $('#nav').toggleClass('active');~~
18
+ ~~ $(".Toggle").toggleClass('active');~~
19
+ ~~})~~
20
+
21
+ の部分は**全部カット**して、Classの付加処理は
22
+ `$('a[href^=#]').click(function() {` の中に移動しましょう。
23
+
24
+ また、メニュークリックでは必ずハンバーガーが閉じるので`toggleClass`ではなく`removeClass`にしたほうが後々の処理干渉がなくなるのでおすすめ。
25
+
26
+ あとCSSから察するに、`open` の class は header ではなく`nav.NavMenu` に付く事で動作しているようなので、
27
+ `$('header').removeClass('open');` の指定箇所は
28
+ `$('.NavMenu').removeClass('open');` にしました。
29
+
24
30
  ```JavaScript
25
- $('a[href^=#]').click(function() {
31
+ $('a[href^=#]').click(function() {
26
- var speed = 400;
32
+ var speed = 400;
27
- var href= $(this).attr("href");
33
+ var href= $(this).attr("href");
28
- var target = $(href == "#" || href == "" ? 'html' : href);
34
+ var target = $(href == "#" || href == "" ? 'html' : href);
29
- var position = target.offset().top;
35
+ var position = target.offset().top;
30
- $('body,html').animate({scrollTop:position}, speed, 'swing');
36
+ $('body,html').animate({scrollTop:position}, speed, 'swing');
31
- $('header').toggleClass('open');
37
+ $('.NavMenu').removeClass('open');
32
- $('.NavMenu').toggleClass('active');
38
+ $('.NavMenu').removeClass('active');
33
- $(".Toggle").toggleClass('active');
39
+ $(".Toggle").removeClass('active');
34
- return false;
40
+ return false;
35
- });
41
+ });
36
42
  ```
37
43
 
38
44
  ### 検証したコード
39
45
  参考に検証したコードをはっておきます。
40
- （勝手に.NavMenu .NavMenu.activeにdisplay:none/block を指定して検証しました）
41
46
  ```HTML
42
47
  <!DOCTYPE html>
48
+ <!DOCTYPE html>
43
49
  <html lang="ja">
44
50
  <head>
45
- <meta charset="UTF-8">
51
+ <meta charset="UTF-8">
46
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
52
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
47
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
53
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
48
- <title>Document</title>
54
+ <title>Document</title>
49
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
55
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
50
- <style>
56
+ <style>
51
- .NavMenu {display:none;}
52
- .NavMenu.active {display:block;}
53
- </style>
57
+ </style>
54
58
  </head>
55
59
  <body>
56
60
 
61
+ <div class="hamburger">
62
+ <div class="Toggle">
63
+ <span></span>
64
+ <span></span>
65
+ <span></span>
66
+ </div>
67
+ </div>
68
+ <nav class="NavMenu">
69
+ <ul class="hummanu">
70
+ <li><a href="#work">Works</a></li>
71
+ <li><a href="#about">About</a></li>
72
+ <li><a href="#contact">Contact</a></li>
73
+ </ul>
74
+ </nav>
57
75
 
58
- <header>
59
- <div class="hamburger">
60
- <div class="Toggle">
61
- <span>-</span>
62
- <span>-</span>
63
- <span>-</span>
64
- </div>
65
- </div>
66
- <nav class="NavMenu">
67
- <ul class="hummanu">
68
- <li><a href="#work">Works</a></li>
76
+ <div id="work" style="margin:50px 0 100vh 0;">#work 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
69
- <li><a href="#about">About</a></li>
77
+ <div id="about" style="margin-bottom:100vh;">#about 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
70
- <li><a href="#contact">Contact</a></li>
78
+ <div id="contact" style="margin-bottom:100vh;">#contact 各スクロールしたい階層<br><a href="#">▲先頭に戻る</a></div>
71
- </ul>
72
- </nav>
73
- </header>
74
79
 
75
- <div id="work" style="margin-bottom:100vh;">各スクロールしたい階層</div>
80
+ </body>
76
- <div id="about" style="margin-bottom:100vh;">各スクロールしたい階層</div>
81
+ </html>
77
- <div id="contact" style="margin-bottom:100vh;">各スクロールしたい階層</div>
82
+ ```
78
83
 
79
- <script>
84
+ ```JavaScript
80
85
  $(function () {
81
- $('.Toggle').click(function () {
86
+ $('.Toggle').click(function () {
82
- $('header').toggleClass('open');
87
+ $('.NavMenu').toggleClass('open');
83
- $(this).toggleClass('active');
88
+ $(this).toggleClass('active');
84
- if ($(this).hasClass('active')) {
89
+ if ($(this).hasClass('active')) {
85
- $('.NavMenu').addClass('active');　 //クラスを付与
90
+ $('.NavMenu').addClass('active');　 //クラスを付与
86
- } else {
91
+ } else {
87
- $('.NavMenu').removeClass('active'); //クラスを外す
92
+ $('.NavMenu').removeClass('active'); //クラスを外す
88
- }
93
+ }
89
- });
94
+ });
90
- $('a[href^=#]').click(function() {
95
+ $('a[href^=#]').click(function() {
91
- var speed = 400;
96
+ var speed = 400;
92
- var href= $(this).attr("href");
97
+ var href= $(this).attr("href");
93
- var target = $(href == "#" || href == "" ? 'html' : href);
98
+ var target = $(href == "#" || href == "" ? 'html' : href);
94
- var position = target.offset().top;
99
+ var position = target.offset().top;
95
- $('body,html').animate({scrollTop:position}, speed, 'swing');
100
+ $('body,html').animate({scrollTop:position}, speed, 'swing');
96
- $('header').toggleClass('open');
101
+ $('.NavMenu').removeClass('open');
97
- $('.NavMenu').toggleClass('active');
102
+ $('.NavMenu').removeClass('active');
98
- $(".Toggle").toggleClass('active');
103
+ $(".Toggle").removeClass('active');
99
- return false;
104
+ return false;
100
- });
105
+ });
101
106
  });
102
- </script>
103
- </body>
104
- </html>
105
- ```
107
+ ```
108
+
109
+ ### CodePen 検証
110
+ https://codepen.io/isscode/pen/pooMBJL

7

文字修正

2019/11/29 01:22

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,7 +1,7 @@
1
1
  追記修正版
2
2
  ----
3
+
3
4
  ### アンカーの問題
4
- -----
5
5
  アンカーリンクはclassではなくIDで指定する必要があります。
6
6
 
7
7
  ```HTML
@@ -35,8 +35,8 @@
35
35
  });
36
36
  ```
37
37
 
38
-
38
+ ### 検証したコード
39
- ▼参考に検証したコードをはっておきます。
39
+ 参考に検証したコードをはっておきます。
40
40
  （勝手に.NavMenu .NavMenu.activeにdisplay:none/block を指定して検証しました）
41
41
  ```HTML
42
42
  <!DOCTYPE html>

6

追記・編集

2019/11/28 07:44

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,8 +1,7 @@
1
- JavaScript内のコメントを`<!-- -->`ではなく`//`にしてみてください。
1
+ 追記修正版
2
-
3
2
  ----
4
- コメントは質問欄だけの記載とのことでしたので追記
3
+ ### アンカーの問題
5
-
4
+ -----
6
5
  アンカーリンクはclassではなくIDで指定する必要があります。
7
6
 
8
7
  ```HTML
@@ -11,75 +10,94 @@
11
10
  <div id="contact">各スクロールしたい階層</div>
12
11
  ```
13
12
 
14
- コードをまるまるコピーして検証を行い、
13
+ ### ハンバーガーメニューが閉じれない問題
15
- コメントを削除し、class を id に変更しただけでスクロールは動作が確認できました。
14
+ 閉じる時のクリック判定が、開く時の判定の中にあるため動作していません。
15
+ ```JavaScript
16
+ $('#nav a').on('click', function() {
17
+ $('#nav').toggleClass('active');
18
+ $(".Toggle").toggleClass('active');
19
+ })
20
+ ```
21
+ の部分は全部カットして、
22
+ `$('a[href^=#]').click(function() {` の中に全部移動しましょう。
16
23
 
24
+ ```JavaScript
17
- リンククリック後にハンバーガーメニューが閉じない原因は、閉じる指定がされていないだけかもしれません。
25
+ $('a[href^=#]').click(function() {
26
+ var speed = 400;
27
+ var href= $(this).attr("href");
28
+ var target = $(href == "#" || href == "" ? 'html' : href);
29
+ var position = target.offset().top;
30
+ $('body,html').animate({scrollTop:position}, speed, 'swing');
18
- ・`$('header').toggleClass('open');`
31
+ $('header').toggleClass('open');
32
+ $('.NavMenu').toggleClass('active');
19
- ・`$(this).toggleClass('active');`
33
+ $(".Toggle").toggleClass('active');
20
- どっちがハンバーガーメニューの開閉に作用しているかCSSがないのでわかりませんが、
34
+ return false;
21
- スクロールの処理のほうにどちらか（或いは両方？）の１行を追記すれば解決しそうです。
35
+ });
36
+ ```
22
37
 
23
38
 
24
39
  ▼参考に検証したコードをはっておきます。
40
+ （勝手に.NavMenu .NavMenu.activeにdisplay:none/block を指定して検証しました）
25
41
  ```HTML
26
42
  <!DOCTYPE html>
27
43
  <html lang="ja">
28
44
  <head>
29
45
  <meta charset="UTF-8">
30
46
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
47
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
31
- <title>sample</title>
48
+ <title>Document</title>
32
49
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
50
+ <style>
51
+ .NavMenu {display:none;}
52
+ .NavMenu.active {display:block;}
53
+ </style>
33
54
  </head>
34
55
  <body>
35
56
 
57
+
36
58
  <header>
37
- <div class="hamburger">
59
+ <div class="hamburger">
38
- <div class="Toggle">
60
+ <div class="Toggle">
39
- <span>-</span>
61
+ <span>-</span>
40
- <span>-</span>
62
+ <span>-</span>
41
- <span>-</span>
63
+ <span>-</span>
64
+ </div>
42
65
  </div>
66
+ <nav class="NavMenu">
67
+ <ul class="hummanu">
68
+ <li><a href="#work">Works</a></li>
69
+ <li><a href="#about">About</a></li>
70
+ <li><a href="#contact">Contact</a></li>
71
+ </ul>
43
- </div>
72
+ </nav>
44
73
  </header>
45
74
 
46
- <nav class="NavMenu">
47
- <ul class="hummanu">
48
- <li><a href="#work">Works</a></li>
49
- <li><a href="#about">About</a></li>
50
- <li><a href="#contact">Contact</a></li>
51
- </ul>
52
- </nav>
53
-
54
75
  <div id="work" style="margin-bottom:100vh;">各スクロールしたい階層</div>
55
76
  <div id="about" style="margin-bottom:100vh;">各スクロールしたい階層</div>
56
77
  <div id="contact" style="margin-bottom:100vh;">各スクロールしたい階層</div>
57
78
 
58
79
  <script>
59
80
  $(function () {
60
- $('.Toggle').click(function () {
81
+ $('.Toggle').click(function () {
61
- $('header').toggleClass('open');
82
+ $('header').toggleClass('open');
62
- $(this).toggleClass('active');
83
+ $(this).toggleClass('active');
63
- if ($(this).hasClass('active')) {
84
+ if ($(this).hasClass('active')) {
64
- $('.NavMenu').addClass('active');　 //クラスを付与
85
+ $('.NavMenu').addClass('active');　 //クラスを付与
65
- } else {
86
+ } else {
66
- $('.NavMenu').removeClass('active'); //クラスを外す
87
+ $('.NavMenu').removeClass('active'); //クラスを外す
67
- }
88
+ }
89
+ });
68
- $('#nav a').on('click', function() {
90
+ $('a[href^=#]').click(function() {
91
+ var speed = 400;
92
+ var href= $(this).attr("href");
93
+ var target = $(href == "#" || href == "" ? 'html' : href);
94
+ var position = target.offset().top;
95
+ $('body,html').animate({scrollTop:position}, speed, 'swing');
96
+ $('header').toggleClass('open');
69
- $('#nav').toggleClass('active');
97
+ $('.NavMenu').toggleClass('active');
70
- $(".Toggle").toggleClass('active');
98
+ $(".Toggle").toggleClass('active');
71
- })
99
+ return false;
72
-
73
- });
100
+ });
74
- $('a[href^=#]').click(function() {
75
- var speed = 400;
76
- var href= $(this).attr("href");
77
- var target = $(href == "#" || href == "" ? 'html' : href);
78
- var position = target.offset().top;
79
- $('body,html').animate({scrollTop:position}, speed, 'swing');
80
- $('header').toggleClass('open');
81
- return false;
82
- });
83
101
  });
84
102
  </script>
85
103
  </body>

5

追記

2019/11/28 07:23

投稿

iss
iss

スコア506

answer CHANGED
@@ -12,4 +12,76 @@
12
12
  ```
13
13
 
14
14
  コードをまるまるコピーして検証を行い、
15
- コメントを削除し、class を id に変更しただけで動作が確認できました。
15
+ コメントを削除し、class を id に変更しただけでスクロールは動作が確認できました。
16
+
17
+ リンククリック後にハンバーガーメニューが閉じない原因は、閉じる指定がされていないだけかもしれません。
18
+ ・`$('header').toggleClass('open');`
19
+ ・`$(this).toggleClass('active');`
20
+ どっちがハンバーガーメニューの開閉に作用しているかCSSがないのでわかりませんが、
21
+ スクロールの処理のほうにどちらか（或いは両方？）の１行を追記すれば解決しそうです。
22
+
23
+
24
+ ▼参考に検証したコードをはっておきます。
25
+ ```HTML
26
+ <!DOCTYPE html>
27
+ <html lang="ja">
28
+ <head>
29
+ <meta charset="UTF-8">
30
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
31
+ <title>sample</title>
32
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
33
+ </head>
34
+ <body>
35
+
36
+ <header>
37
+ <div class="hamburger">
38
+ <div class="Toggle">
39
+ <span>-</span>
40
+ <span>-</span>
41
+ <span>-</span>
42
+ </div>
43
+ </div>
44
+ </header>
45
+
46
+ <nav class="NavMenu">
47
+ <ul class="hummanu">
48
+ <li><a href="#work">Works</a></li>
49
+ <li><a href="#about">About</a></li>
50
+ <li><a href="#contact">Contact</a></li>
51
+ </ul>
52
+ </nav>
53
+
54
+ <div id="work" style="margin-bottom:100vh;">各スクロールしたい階層</div>
55
+ <div id="about" style="margin-bottom:100vh;">各スクロールしたい階層</div>
56
+ <div id="contact" style="margin-bottom:100vh;">各スクロールしたい階層</div>
57
+
58
+ <script>
59
+ $(function () {
60
+ $('.Toggle').click(function () {
61
+ $('header').toggleClass('open');
62
+ $(this).toggleClass('active');
63
+ if ($(this).hasClass('active')) {
64
+ $('.NavMenu').addClass('active');　 //クラスを付与
65
+ } else {
66
+ $('.NavMenu').removeClass('active'); //クラスを外す
67
+ }
68
+ $('#nav a').on('click', function() {
69
+ $('#nav').toggleClass('active');
70
+ $(".Toggle").toggleClass('active');
71
+ })
72
+
73
+ });
74
+ $('a[href^=#]').click(function() {
75
+ var speed = 400;
76
+ var href= $(this).attr("href");
77
+ var target = $(href == "#" || href == "" ? 'html' : href);
78
+ var position = target.offset().top;
79
+ $('body,html').animate({scrollTop:position}, speed, 'swing');
80
+ $('header').toggleClass('open');
81
+ return false;
82
+ });
83
+ });
84
+ </script>
85
+ </body>
86
+ </html>
87
+ ```

4

追記

2019/11/28 05:34

投稿

iss
iss

スコア506

answer CHANGED
@@ -9,4 +9,7 @@
9
9
  <div id="work">各スクロールしたい階層</div>
10
10
  <div id="about">各スクロールしたい階層</div>
11
11
  <div id="contact">各スクロールしたい階層</div>
12
- ```
12
+ ```
13
+
14
+ コードをまるまるコピーして検証を行い、
15
+ コメントを削除し、class を id に変更しただけで動作が確認できました。

3

文字列修正

2019/11/28 05:06

投稿

iss
iss

スコア506

answer CHANGED
@@ -5,8 +5,8 @@
5
5
 
6
6
  アンカーリンクはclassではなくIDで指定する必要があります。
7
7
 
8
- ```ここに言語を入力
8
+ ```HTML
9
- <div id="work">//各スクロールしたい階層</div>
9
+ <div id="work">各スクロールしたい階層</div>
10
- <div id="about">//各スクロールしたい階層</div>
10
+ <div id="about">各スクロールしたい階層</div>
11
- <div id="contact">//各スクロールしたい階層</div>
11
+ <div id="contact">各スクロールしたい階層</div>
12
12
  ```

2

追記

2019/11/28 05:04

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,1 +1,12 @@
1
- JavaScript内のコメントを`<!-- -->`ではなく`//`にしてみてください。
1
+ JavaScript内のコメントを`<!-- -->`ではなく`//`にしてみてください。
2
+
3
+ ----
4
+ コメントは質問欄だけの記載とのことでしたので追記
5
+
6
+ アンカーリンクはclassではなくIDで指定する必要があります。
7
+
8
+ ```ここに言語を入力
9
+ <div id="work">//各スクロールしたい階層</div>
10
+ <div id="about">//各スクロールしたい階層</div>
11
+ <div id="contact">//各スクロールしたい階層</div>
12
+ ```

1

文字列修正

2019/11/28 05:03

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,1 +1,1 @@
1
- Javascript内のコメントを`<!-- -->`ではなく`//`にしてみてください。
1
+ JavaScript内のコメントを`<!-- -->`ではなく`//`にしてみてください。