teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ページ内リンクでナビゲーションから現在の位置のリンクを消す

編集履歴

質問編集履歴

1

Javascript修正

2016/10/17 03:07

投稿

a2s
a2s

スコア39

test CHANGED
File without changes
test CHANGED
@@ -86,216 +86,218 @@
86
86
 
87
87
  ```
88
88
 
89
- ```Javascript
90
-
91
- $(function() {
92
-
93
- // ナビゲーションのリンクを指定
94
-
95
- var navLink = $('#gnav li a');
96
-
97
- // 各コンテンツのページ上部からの開始位置と終了位置を配列に格納しておく
98
-
99
- var contentsArr = new Array();
100
-
101
- for (var i = 0; i < navLink.length; i++) {
102
-
103
- // コンテンツのIDを取得
104
-
105
- var targetContents = navLink.eq(i).attr('href');
106
-
107
- // ページ内リンクでないナビゲーションが含まれている場合は除外する
108
-
109
- if(targetContents.charAt(0) == '#') {
110
-
111
- // ページ上部からコンテンツの開始位置までの距離を取得
112
-
113
- var targetContentsTop = $(targetContents).offset().top;
114
-
115
- // ページ上部からコンテンツの終了位置までの距離を取得
116
-
117
- var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;
118
-
119
- // 配列に格納
120
-
121
- contentsArr[i] = [targetContentsTop, targetContentsBottom]
122
-
123
- }
124
-
125
- };
126
-
127
- // 現在地をチェックする
128
-
129
- function currentCheck() {
130
-
131
- // 現在のスクロール位置を取得
132
-
133
- var windowScrolltop = $(window).scrollTop();
134
-
135
- for (var i = 0; i < contentsArr.length; i++) {
136
-
137
- // 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
138
-
139
- if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) {
140
-
141
- // 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける
142
-
143
- navLink.removeClass('current');
144
-
145
- navLink.eq(i).addClass('current');
146
-
147
- i == contentsArr.length;
148
-
149
- }
150
-
151
- };
152
-
153
- }
154
-
155
-
156
-
157
- // ページ読み込み時とスクロール時に、現在地をチェックする
158
-
159
- $(window).on('load scroll', function() {
160
-
161
- currentCheck();
162
-
163
- });
164
-
165
-
166
-
167
- // ナビゲーションをクリックした時のスムーズスクロール
168
-
169
- navLink.click(function() {
170
-
171
- $('html,body').animate({
172
-
173
- scrollTop: $($(this).attr('href')).offset().top
174
-
175
- }, 300);
176
-
177
- return false;
178
-
179
- })
180
-
181
- });
89
+ ```CSS
90
+
91
+ * {
92
+
93
+ margin: 0;
94
+
95
+ padding: 0;
96
+
97
+ }
98
+
99
+ li{
100
+
101
+ list-style-type: none;
102
+
103
+ }
104
+
105
+ #page {
106
+
107
+ position: relative;
108
+
109
+ width: 100%;
110
+
111
+ }
112
+
113
+ .inner {
114
+
115
+ width: 960px;
116
+
117
+ overflow: hidden;
118
+
119
+ margin: 0 auto;
120
+
121
+ }
122
+
123
+ #header {
124
+
125
+ position: fixed;
126
+
127
+ top: 0;
128
+
129
+ left: 0;
130
+
131
+ z-index: 200;
132
+
133
+ width: 100%;
134
+
135
+ padding: 20px 0;
136
+
137
+ text-align: center;
138
+
139
+ background: #dddddd;
140
+
141
+ }
142
+
143
+ #header #gnav {
144
+
145
+ float: right;
146
+
147
+ }
148
+
149
+ #header #gnav li {
150
+
151
+ float: left;
152
+
153
+ padding-left: 20px;
154
+
155
+ }
156
+
157
+ #header #gnav li a {
158
+
159
+ color: #666666;
160
+
161
+ text-decoration: none;
162
+
163
+ }
164
+
165
+ #header #gnav li a.current {
166
+
167
+ color: #000000;
168
+
169
+ text-decoration: underline;
170
+
171
+ }
172
+
173
+ #contents {
174
+
175
+ position: relative;
176
+
177
+ z-index: 100;
178
+
179
+ width: 100%;
180
+
181
+ background: #bbbbbb;
182
+
183
+ }
184
+
185
+ #contents .inner div {
186
+
187
+ height: 1000px;
188
+
189
+ padding-top: 70px;
190
+
191
+ }
192
+
193
+ #contents .inner div:nth-child(even) {
194
+
195
+ background: #777777;
196
+
197
+ }
198
+
199
+ #contents .inner div:nth-child(odd) {
200
+
201
+ background: #999999;
202
+
203
+ }
182
204
 
183
205
  ```
184
206
 
185
- ```CSS
186
-
187
- * {
188
-
189
- margin: 0;
190
-
191
- padding: 0;
192
-
193
- }
194
-
195
- li{
196
-
197
- list-style-type: none;
198
-
199
- }
200
-
201
- #page {
202
-
203
- position: relative;
204
-
205
- width: 100%;
206
-
207
- }
208
-
209
- .inner {
210
-
211
- width: 960px;
212
-
213
- overflow: hidden;
214
-
215
- margin: 0 auto;
216
-
217
- }
218
-
219
- #header {
220
-
221
- position: fixed;
222
-
223
- top: 0;
224
-
225
- left: 0;
226
-
227
- z-index: 200;
228
-
229
- width: 100%;
230
-
231
- padding: 20px 0;
232
-
233
- text-align: center;
234
-
235
- background: #dddddd;
236
-
237
- }
238
-
239
- #header #gnav {
240
-
241
- float: right;
242
-
243
- }
244
-
245
- #header #gnav li {
246
-
247
- float: left;
248
-
249
- padding-left: 20px;
250
-
251
- }
252
-
253
- #header #gnav li a {
254
-
255
- color: #666666;
256
-
257
- text-decoration: none;
258
-
259
- }
260
-
261
- #header #gnav li a.current {
262
-
263
- color: #000000;
264
-
265
- text-decoration: underline;
266
-
267
- }
268
-
269
- #contents {
270
-
271
- position: relative;
272
-
273
- z-index: 100;
274
-
275
- width: 100%;
276
-
277
- background: #bbbbbb;
278
-
279
- }
280
-
281
- #contents .inner div {
282
-
283
- height: 1000px;
284
-
285
- padding-top: 70px;
286
-
287
- }
288
-
289
- #contents .inner div:nth-child(even) {
290
-
291
- background: #777777;
292
-
293
- }
294
-
295
- #contents .inner div:nth-child(odd) {
296
-
297
- background: #999999;
298
-
299
- }
207
+ ```修正後Javascript
208
+
209
+ // ナビゲーションのリンクを指定
210
+
211
+ var navLink = $('#gnav li a');
212
+
213
+ // 各コンテンツのページ上部からの開始位置と終了位置を配列に格納しておく
214
+
215
+ var contentsArr = new Array();
216
+
217
+ for (var i = 0; i < navLink.length; i++) {
218
+
219
+ // コンテンツのIDを取得
220
+
221
+ var targetContents = navLink.eq(i).attr('href');
222
+
223
+ // ページ内リンクでないナビゲーションが含まれている場合は除外する
224
+
225
+ if(targetContents.charAt(0) == '#') {
226
+
227
+ // ページ上部からコンテンツの開始位置までの距離を取得
228
+
229
+ var targetContentsTop = $(targetContents).offset().top;
230
+
231
+ // ページ上部からコンテンツの終了位置までの距離を取得
232
+
233
+ var targetContentsBottom = targetContentsTop + $(targetContents).outerHeight(true) - 1;
234
+
235
+ // 配列に格納
236
+
237
+ contentsArr[i] = [targetContentsTop, targetContentsBottom]
238
+
239
+ }
240
+
241
+ };
242
+
243
+ // 現在地をチェックする
244
+
245
+ function currentCheck() {
246
+
247
+ // 現在のスクロール位置を取得
248
+
249
+ var windowScrolltop = $(window).scrollTop();
250
+
251
+ for (var i = 0; i < contentsArr.length; i++) {
252
+
253
+ // 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
254
+
255
+ if(contentsArr[i][0] <= windowScrolltop && contentsArr[i][1] >= windowScrolltop) {
256
+
257
+ // 開始位置と終了位置の間にある場合、ナビゲーションにclass="current"をつける
258
+
259
+ navLink.removeClass('current');
260
+
261
+ navLink.eq(i).addClass('current');
262
+
263
+ i == contentsArr.length;
264
+
265
+ }
266
+
267
+ };
268
+
269
+ }
270
+
271
+
272
+
273
+ // ページ読み込み時とスクロール時に、現在地をチェックする
274
+
275
+ $(window).on('load scroll', function() {
276
+
277
+ currentCheck();
278
+
279
+ });
280
+
281
+
282
+
283
+ // ナビゲーションをクリックした時のスムーズスクロール
284
+
285
+ navLink.click(function(e) {
286
+
287
+ e.preventDefault();
288
+
289
+
290
+
291
+ if( $(e.currentTarget).attr('class') === 'current' ) return false;
292
+
293
+ $('html,body').animate({
294
+
295
+ scrollTop: $($(this).attr('href')).offset().top
296
+
297
+ }, 300);
298
+
299
+ return false;
300
+
301
+ })
300
302
 
301
303
  ```