teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問ドロワーメニューを表示するとページのトップまで戻ってしまう

編集履歴

質問編集履歴

1

不足点の追加

2020/03/15 16:15

投稿

ringoame49
ringoame49

スコア46

title CHANGED
File without changes
body CHANGED
@@ -10,95 +10,171 @@
10
10
 
11
11
  HTML
12
12
  ```
13
+ <!DOCTYPE html>
14
+ <html dir="ltr" lang="ja">
15
+ <head>
16
+ <meta charset="utf-8">
17
+ <meta name=”robots” content=”noindex,nofollow“>
18
+ <meta name="viewport" content="width=750">
19
+ <link rel="stylesheet" type="text/css" href="teststyle.css">
20
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
21
+ <script type="text/javascript" src="testscript.js"></script>
22
+ <title><?php echo $page_title; ?></title>
23
+ </head>
13
24
  <body>
14
25
 
26
+
15
27
  <div id="naviOpen">
16
- MENU
28
+ MENU
17
29
  </div>
18
30
 
19
31
  <nav id="headerNavi">
20
- <div id="naviClose">閉じる</div>
32
+ <div id="naviClose">閉じる</div>
21
- <ul id="mainMenu">
33
+ <ul id="mainMenu">
34
+ <li><a href="">AAAAAAA</a></li>
35
+ <li><a href="">AAAAAAA</a></li>
22
36
  <li><a href="">AAAAAAA</a></li>
23
- 　　　　　　　　　　　　・
24
- 　　　　　　　　　　　　・
25
- 　　　　　　　　　　　　・
26
- 　　　　　　　　　　　　・
27
37
  <li><a href="">AAAAAAA</a></li>
38
+ <li><a href="">AAAAAAA</a></li>
39
+ <li><a href="">AAAAAAA</a></li>
40
+ <li><a href="">AAAAAAA</a></li>
28
- </ul>
41
+ </ul>
29
42
  </nav>
30
43
 
31
44
  <div id="mainHeader">
32
- ・
45
+
33
- ・
34
- ・
35
- ・
36
- ・
37
- ・
38
46
  </div>
39
47
 
40
48
  <div id="contentsWrapper">
41
- 固定されたヘッダの下全てを囲むブロック
49
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
50
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
51
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
52
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
53
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
54
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
55
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
56
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
57
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
58
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
59
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
60
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
61
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
62
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
63
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
64
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
65
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
66
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
67
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
68
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
69
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
70
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
71
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
72
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
73
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
74
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
75
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
76
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
77
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
78
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
79
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
80
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
81
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
82
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
83
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
84
+ <p> 固定されたヘッダの下全てを囲むブロック</p>
42
85
  </div>
43
86
 
87
+
44
88
  </body>
89
+ </html>
45
90
  ```
46
91
 
47
92
  CSS
48
93
  ```
94
+ *{
95
+ margin :0px;
96
+ padding: 0px;
97
+ }
98
+
99
+ html,
100
+ body,
101
+ p,
102
+ dl, dt, dd {
103
+ padding: 0;
104
+ margin: 0;
105
+ word-wrap: break-word;
106
+ }
49
107
  body {
50
- width: 750px;
108
+ width: 750px;
51
- min-width: 750px;
109
+ min-width: 750px;
52
110
  }
53
111
  #contentsWrapper {
54
- margin-top: 150px;
112
+ margin-top: 150px;
55
- width: 750px;
113
+ width: 750px;
56
- min-width: 750px;
114
+ min-width: 750px;
57
- -webkit-overflow-scrolling: touch;
115
+ -webkit-overflow-scrolling: touch;
58
116
  }
59
117
  #mainHeader {
60
- position: fixed;
118
+ position: fixed;
119
+ top: 0;
120
+ left: 0;
61
- width: 100%;
121
+ width: 100%;
62
- min-width: 750px;
122
+ min-width: 750px;
63
- height: 150px;
123
+ height: 150px;
124
+ background: #505050;
64
125
  }
65
126
  #headerNavi {
66
- display: none;
127
+ display: none;
67
- position: fixed;
128
+ position: fixed;
68
- width: 750px;
129
+ width: 750px;
69
- top: 0;
130
+ top: 0;
131
+ right: 0;
70
- overflow-y: scroll;
132
+ overflow-y: scroll;
71
- z-index: 2;
133
+ z-index: 2;
134
+ background: red;
72
135
  }
73
136
  #headerNavi ul {
74
- width: 750px;
137
+ width: 750px;
75
138
  }
76
139
  #naviOpen {
77
- display: block;
140
+ display: block;
78
- position: fixed;
141
+ position: fixed;
79
- top: 0;
142
+ top: 0;
80
- right: 0;
143
+ right: 0;
81
- width: 150px;
144
+ width: 150px;
82
- height: 150px;
145
+ height: 150px;
83
- z-index: 1;
146
+ z-index: 1;
84
-
147
+ background: #cdcdcd;
148
+
85
- }
149
+ }
86
150
  .hide {
87
- overflow: hidden;
151
+ overflow: hidden;
88
152
  }
153
+ }
89
154
  ```
90
155
 
91
156
  JavaScript
92
157
  ```
158
+ $(function(){
159
+
93
- // スマホナビメニュー
160
+ windowWidth = window.innerWidth;
161
+ contentsWrapper = $('#contentsWrapper');
162
+
163
+ var screenHeight = window.innerHeight;
164
+ var UnderFixdeHeight = parseInt(screenHeight) - 150;
165
+ contentsWrapper.css('height', UnderFixdeHeight);
166
+ $('#headerNavi').css('height', screenHeight);
167
+
94
168
  $('#naviOpen').on('click', function() {
95
- $(this).next().animate( { width: 'show' }, 500);
169
+ $(this).next().animate( { width: 'show' }, 500);
96
170
  contentsWrapper.addClass('hide');
97
- } );
171
+ } );
98
172
  $('#naviClose') .on('click', function() {
99
- $(this).parent().animate( { width: 'hide' }, 500);
173
+ $(this).parent().animate( { width: 'hide' }, 500);
100
174
  contentsWrapper.removeClass('hide');
101
- } );
175
+ } );
176
+
177
+ });
102
178
  ```
103
179
 
104
180
  全く解決できないので是非ご教授いただけますと幸いです。