質問編集履歴
9
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -66,210 +66,45 @@
|
|
|
66
66
|
ご助力いただけますと大変助かります。
|
|
67
67
|
|
|
68
68
|
### 追記
|
|
69
|
+
|
|
70
|
+
22.01.04 追記
|
|
69
71
|
```js
|
|
70
72
|
/* smooth scroll --------------------------------------------- */
|
|
71
73
|
let Ease = {
|
|
72
|
-
easeInOut: function (t) {
|
|
73
|
-
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
let duration = 1200;
|
|
77
|
-
ttt = document;
|
|
78
|
-
options = {
|
|
79
|
-
childList: true,
|
|
80
|
-
characterData: true,
|
|
81
|
-
characterDataOldValue: true,
|
|
82
|
-
attributes: true,
|
|
83
|
-
subtree: true,
|
|
84
|
-
}
|
|
85
|
-
function call01(mutationsList) {
|
|
86
|
-
for (const mutation of mutationsList) {
|
|
87
|
-
tar = mutation.target // target
|
|
88
|
-
add = mutation.addedNodes // add DOM
|
|
89
|
-
remove = mutation.removedNodes // delate DOM
|
|
90
|
-
anchorLinks = [].slice.call(tar.querySelectorAll('a[href^="#"]'));
|
|
91
|
-
console.log(anchorLinks);
|
|
92
|
-
for(const anchorLink of anchorLinks) {
|
|
93
|
-
console.log(anchorLink);
|
|
94
|
-
anchorLink.addEventListener('click', function (e) {
|
|
95
|
-
let href = anchorLink.getAttribute('href');
|
|
96
|
-
let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
97
|
-
let targetElement = document.getElementById(href.replace('#', ''));
|
|
98
|
-
if (targetElement) {
|
|
99
|
-
e.preventDefault();
|
|
100
|
-
e.stopPropagation();
|
|
101
|
-
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
102
|
-
let startTime = performance.now();
|
|
103
|
-
let loop = function (nowTime) {
|
|
104
|
-
let time = nowTime - startTime;
|
|
105
|
-
let normalizedTime = time / duration;
|
|
106
|
-
if (normalizedTime < 1) {
|
|
107
|
-
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
108
|
-
requestAnimationFrame(loop);
|
|
109
|
-
} else {
|
|
110
|
-
window.scrollTo(0, targetPosition);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
requestAnimationFrame(loop);
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
obs01.disconnect();
|
|
119
|
-
}
|
|
120
|
-
obs01 = new MutationObserver(call01);
|
|
121
|
-
obs01.observe(ttt, options);
|
|
122
|
-
/* smooth scroll ----------------------------------------- end */
|
|
123
|
-
```
|
|
124
|
-
MutationObserverを使って書き直したところ、
|
|
125
|
-
anchorLinks, anchorLink の値が取得できる時と、配列が空の時で安定しませんでした。
|
|
126
|
-
どうすれば安定するでしょうか。
|
|
127
|
-
|
|
128
|
-
```js
|
|
129
|
-
let Ease = {
|
|
130
74
|
easeInOut: function (t) {
|
|
131
75
|
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
132
76
|
}
|
|
133
77
|
},
|
|
134
|
-
duration = 1200
|
|
78
|
+
duration = 1200;
|
|
135
|
-
anchorLinks = [].slice.call(document.querySelectorAll('a[href^="#"]'));
|
|
136
|
-
|
|
79
|
+
function smooth(e) {
|
|
137
|
-
anchorLink.addEventListener('click', function (e) {
|
|
138
|
-
|
|
80
|
+
href = this.getAttribute('href');
|
|
139
|
-
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
140
|
-
|
|
81
|
+
targetElement = document.getElementById(href.replace('#', ''));
|
|
141
|
-
|
|
82
|
+
if (targetElement) {
|
|
142
|
-
|
|
83
|
+
e.preventDefault();
|
|
143
|
-
|
|
84
|
+
e.stopPropagation();
|
|
85
|
+
let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
144
|
-
|
|
86
|
+
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
145
|
-
|
|
87
|
+
let startTime = performance.now();
|
|
146
|
-
|
|
88
|
+
let loop = function (nowTime) {
|
|
147
|
-
|
|
89
|
+
let time = nowTime - startTime;
|
|
148
|
-
|
|
90
|
+
let normalizedTime = time / duration;
|
|
149
|
-
|
|
91
|
+
if (normalizedTime < 1) {
|
|
150
|
-
|
|
92
|
+
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
151
|
-
|
|
93
|
+
requestAnimationFrame(loop);
|
|
152
|
-
|
|
94
|
+
} else {
|
|
153
|
-
|
|
95
|
+
window.scrollTo(0, targetPosition);
|
|
154
|
-
}
|
|
155
96
|
}
|
|
156
|
-
requestAnimationFrame(loop);
|
|
157
97
|
}
|
|
158
|
-
});
|
|
159
|
-
});
|
|
160
|
-
ttt = document;
|
|
161
|
-
options = {
|
|
162
|
-
childList: true,
|
|
163
|
-
characterData: true,
|
|
164
|
-
characterDataOldValue: true,
|
|
165
|
-
attributes: true,
|
|
166
|
-
subtree: true,
|
|
167
|
-
}
|
|
168
|
-
function call01(mutationsList) {
|
|
169
|
-
for (const mutation of mutationsList) {
|
|
170
|
-
let tar = mutation.target,
|
|
171
|
-
add = mutation.addedNodes, // add DOM
|
|
172
|
-
remove = mutation.removedNodes; // delate DOM
|
|
173
|
-
let triggers = [].slice.call(tar.querySelectorAll('a[href^="#"]'));
|
|
174
|
-
console.log(triggers);
|
|
175
|
-
for (const trigger of triggers) {
|
|
176
|
-
console.log(trigger)
|
|
177
|
-
trigger.addEventListener('click', function (e) {
|
|
178
|
-
href = trigger.getAttribute('href');
|
|
179
|
-
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
180
|
-
targetElement = document.getElementById(href.replace('#', ''));
|
|
181
|
-
if (targetElement) {
|
|
182
|
-
e.preventDefault();
|
|
183
|
-
e.stopPropagation();
|
|
184
|
-
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
185
|
-
let startTime = performance.now();
|
|
186
|
-
let loop = function (nowTime) {
|
|
187
|
-
let time = nowTime - startTime;
|
|
188
|
-
let normalizedTime = time / duration;
|
|
189
|
-
if (normalizedTime < 1) {
|
|
190
|
-
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
191
|
-
|
|
98
|
+
requestAnimationFrame(loop);
|
|
192
|
-
} else {
|
|
193
|
-
window.scrollTo(0, targetPosition);
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
requestAnimationFrame(loop);
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
};
|
|
200
99
|
}
|
|
201
|
-
obs01.disconnect();
|
|
202
|
-
}
|
|
203
|
-
obs01 = new MutationObserver(call01);
|
|
204
|
-
obs01.observe(ttt, options);
|
|
205
|
-
```
|
|
206
|
-
元々あるアンカーはスムーズスクロールするようになりました。
|
|
207
|
-
しかし追加したリンクは配列が空になってしまします。どうすればいいでしょうか。
|
|
208
|
-
```js
|
|
209
|
-
let Ease = {
|
|
210
|
-
easeInOut: function (t) {
|
|
211
|
-
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
212
|
-
}
|
|
213
|
-
|
|
100
|
+
};
|
|
214
|
-
duration = 1200,
|
|
215
|
-
|
|
101
|
+
let anchorLinks = [].slice.call(document.querySelectorAll('a[href^="#"]'));
|
|
216
|
-
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
217
102
|
anchorLinks.forEach(function (anchorLink) {
|
|
218
|
-
anchorLink.addEventListener(
|
|
103
|
+
anchorLink.addEventListener("click", smooth, false);
|
|
219
|
-
href = anchorLink.getAttribute('href');
|
|
220
|
-
targetElement = document.getElementById(href.replace('#', ''));
|
|
221
|
-
if (targetElement) {
|
|
222
|
-
e.preventDefault();
|
|
223
|
-
e.stopPropagation();
|
|
224
|
-
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
225
|
-
let startTime = performance.now();
|
|
226
|
-
let loop = function (nowTime) {
|
|
227
|
-
let time = nowTime - startTime;
|
|
228
|
-
let normalizedTime = time / duration;
|
|
229
|
-
if (normalizedTime < 1) {
|
|
230
|
-
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
231
|
-
requestAnimationFrame(loop);
|
|
232
|
-
} else {
|
|
233
|
-
window.scrollTo(0, targetPosition);
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
requestAnimationFrame(loop);
|
|
237
|
-
}
|
|
238
|
-
});
|
|
239
104
|
});
|
|
240
|
-
document.addEventListener('click', function (e) {
|
|
241
|
-
trigger = e.target;
|
|
242
|
-
anchor = '/#{1}([0-9a-zA-Z\-\_])+/';
|
|
243
|
-
if (trigger.tagName.toLowerCase() === 'a' && trigger.href == anchor) { // and条件で a[href^="#"]を入れたい
|
|
244
|
-
let href = trigger.getAttribute('href');
|
|
245
|
-
|
|
105
|
+
/* smooth scroll ----------------------------------------- end */
|
|
246
|
-
if (targetElement) {
|
|
247
|
-
e.preventDefault();
|
|
248
|
-
e.stopPropagation();
|
|
249
|
-
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
250
|
-
let startTime = performance.now();
|
|
251
|
-
let loop = function (nowTime) {
|
|
252
|
-
let time = nowTime - startTime;
|
|
253
|
-
let normalizedTime = time / duration;
|
|
254
|
-
if (normalizedTime < 1) {
|
|
255
|
-
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
256
|
-
requestAnimationFrame(loop);
|
|
257
|
-
} else {
|
|
258
|
-
window.scrollTo(0, targetPosition);
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
|
-
requestAnimationFrame(loop);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
});
|
|
265
106
|
```
|
|
266
|
-
|
|
107
|
+
こちらのコードのに変更したところ、動的に追加した（Fetch Api で追加した要素）はスムーズスクロールしませんでした。他はしています。
|
|
267
|
-
trigger.href == が違うんですかね？
|
|
268
|
-
```js
|
|
269
|
-
anchor = '/^#([a-zA-Z0-9!-/:-@¥[-`{-~]*$)/';
|
|
270
|
-
```
|
|
271
|
-
に変えました。多分正規表現はチェッカーで見たのであっているかと思います。
|
|
272
|
-
しかしスムーズスクロールしません。どうしてでしょうか……？
|
|
273
108
|
|
|
274
109
|
### 補足情報（FW/ツールのバージョンなど）
|
|
275
110
|
Firefox 最新版
|
8
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -265,7 +265,7 @@
|
|
|
265
265
|
```
|
|
266
266
|
元々あるリンクはスムーズスクロールします。しかし動的に追加したアンカーリンクはしません。正規表現は合っていますか？ あまり自信がないです。
|
|
267
267
|
trigger.href == が違うんですかね？
|
|
268
|
-
|
|
268
|
+
```js
|
|
269
269
|
anchor = '/^#([a-zA-Z0-9!-/:-@¥[-`{-~]*$)/';
|
|
270
270
|
```
|
|
271
271
|
に変えました。多分正規表現はチェッカーで見たのであっているかと思います。
|
7
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -265,6 +265,11 @@
|
|
|
265
265
|
```
|
|
266
266
|
元々あるリンクはスムーズスクロールします。しかし動的に追加したアンカーリンクはしません。正規表現は合っていますか？ あまり自信がないです。
|
|
267
267
|
trigger.href == が違うんですかね？
|
|
268
|
+
'''js
|
|
269
|
+
anchor = '/^#([a-zA-Z0-9!-/:-@¥[-`{-~]*$)/';
|
|
270
|
+
```
|
|
271
|
+
に変えました。多分正規表現はチェッカーで見たのであっているかと思います。
|
|
272
|
+
しかしスムーズスクロールしません。どうしてでしょうか……？
|
|
268
273
|
|
|
269
274
|
### 補足情報（FW/ツールのバージョンなど）
|
|
270
275
|
Firefox 最新版
|
6
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
});
|
|
240
240
|
document.addEventListener('click', function (e) {
|
|
241
241
|
trigger = e.target;
|
|
242
|
-
anchor = '/#{1}[0-9a-zA-Z]+/';
|
|
242
|
+
anchor = '/#{1}([0-9a-zA-Z\-\_])+/';
|
|
243
243
|
if (trigger.tagName.toLowerCase() === 'a' && trigger.href == anchor) { // and条件で a[href^="#"]を入れたい
|
|
244
244
|
let href = trigger.getAttribute('href');
|
|
245
245
|
let targetElement = document.getElementById(href.replace('#', ''));
|
5
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -205,6 +205,66 @@
|
|
|
205
205
|
```
|
|
206
206
|
元々あるアンカーはスムーズスクロールするようになりました。
|
|
207
207
|
しかし追加したリンクは配列が空になってしまします。どうすればいいでしょうか。
|
|
208
|
+
```js
|
|
209
|
+
let Ease = {
|
|
210
|
+
easeInOut: function (t) {
|
|
211
|
+
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
duration = 1200,
|
|
215
|
+
anchorLinks = [].slice.call(document.querySelectorAll('a[href^="#"]')),
|
|
216
|
+
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
217
|
+
anchorLinks.forEach(function (anchorLink) {
|
|
218
|
+
anchorLink.addEventListener('click', function (e) {
|
|
219
|
+
href = anchorLink.getAttribute('href');
|
|
220
|
+
targetElement = document.getElementById(href.replace('#', ''));
|
|
221
|
+
if (targetElement) {
|
|
222
|
+
e.preventDefault();
|
|
223
|
+
e.stopPropagation();
|
|
224
|
+
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
225
|
+
let startTime = performance.now();
|
|
226
|
+
let loop = function (nowTime) {
|
|
227
|
+
let time = nowTime - startTime;
|
|
228
|
+
let normalizedTime = time / duration;
|
|
229
|
+
if (normalizedTime < 1) {
|
|
230
|
+
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
231
|
+
requestAnimationFrame(loop);
|
|
232
|
+
} else {
|
|
233
|
+
window.scrollTo(0, targetPosition);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
requestAnimationFrame(loop);
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
});
|
|
240
|
+
document.addEventListener('click', function (e) {
|
|
241
|
+
trigger = e.target;
|
|
242
|
+
anchor = '/#{1}[0-9a-zA-Z]+/';
|
|
243
|
+
if (trigger.tagName.toLowerCase() === 'a' && trigger.href == anchor) { // and条件で a[href^="#"]を入れたい
|
|
244
|
+
let href = trigger.getAttribute('href');
|
|
245
|
+
let targetElement = document.getElementById(href.replace('#', ''));
|
|
246
|
+
if (targetElement) {
|
|
247
|
+
e.preventDefault();
|
|
248
|
+
e.stopPropagation();
|
|
249
|
+
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
250
|
+
let startTime = performance.now();
|
|
251
|
+
let loop = function (nowTime) {
|
|
252
|
+
let time = nowTime - startTime;
|
|
253
|
+
let normalizedTime = time / duration;
|
|
254
|
+
if (normalizedTime < 1) {
|
|
255
|
+
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
256
|
+
requestAnimationFrame(loop);
|
|
257
|
+
} else {
|
|
258
|
+
window.scrollTo(0, targetPosition);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
requestAnimationFrame(loop);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
```
|
|
266
|
+
元々あるリンクはスムーズスクロールします。しかし動的に追加したアンカーリンクはしません。正規表現は合っていますか？ あまり自信がないです。
|
|
267
|
+
trigger.href == が違うんですかね？
|
|
208
268
|
|
|
209
269
|
### 補足情報（FW/ツールのバージョンなど）
|
|
210
270
|
Firefox 最新版
|
4
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -125,6 +125,86 @@
|
|
|
125
125
|
anchorLinks, anchorLink の値が取得できる時と、配列が空の時で安定しませんでした。
|
|
126
126
|
どうすれば安定するでしょうか。
|
|
127
127
|
|
|
128
|
+
```js
|
|
129
|
+
let Ease = {
|
|
130
|
+
easeInOut: function (t) {
|
|
131
|
+
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
duration = 1200,
|
|
135
|
+
anchorLinks = [].slice.call(document.querySelectorAll('a[href^="#"]'));
|
|
136
|
+
anchorLinks.forEach(function (anchorLink) {
|
|
137
|
+
anchorLink.addEventListener('click', function (e) {
|
|
138
|
+
href = anchorLink.getAttribute('href');
|
|
139
|
+
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
140
|
+
targetElement = document.getElementById(href.replace('#', ''));
|
|
141
|
+
if (targetElement) {
|
|
142
|
+
e.preventDefault();
|
|
143
|
+
e.stopPropagation();
|
|
144
|
+
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
145
|
+
let startTime = performance.now();
|
|
146
|
+
let loop = function (nowTime) {
|
|
147
|
+
let time = nowTime - startTime;
|
|
148
|
+
let normalizedTime = time / duration;
|
|
149
|
+
if (normalizedTime < 1) {
|
|
150
|
+
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
151
|
+
requestAnimationFrame(loop);
|
|
152
|
+
} else {
|
|
153
|
+
window.scrollTo(0, targetPosition);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
requestAnimationFrame(loop);
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
});
|
|
160
|
+
ttt = document;
|
|
161
|
+
options = {
|
|
162
|
+
childList: true,
|
|
163
|
+
characterData: true,
|
|
164
|
+
characterDataOldValue: true,
|
|
165
|
+
attributes: true,
|
|
166
|
+
subtree: true,
|
|
167
|
+
}
|
|
168
|
+
function call01(mutationsList) {
|
|
169
|
+
for (const mutation of mutationsList) {
|
|
170
|
+
let tar = mutation.target,
|
|
171
|
+
add = mutation.addedNodes, // add DOM
|
|
172
|
+
remove = mutation.removedNodes; // delate DOM
|
|
173
|
+
let triggers = [].slice.call(tar.querySelectorAll('a[href^="#"]'));
|
|
174
|
+
console.log(triggers);
|
|
175
|
+
for (const trigger of triggers) {
|
|
176
|
+
console.log(trigger)
|
|
177
|
+
trigger.addEventListener('click', function (e) {
|
|
178
|
+
href = trigger.getAttribute('href');
|
|
179
|
+
currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
180
|
+
targetElement = document.getElementById(href.replace('#', ''));
|
|
181
|
+
if (targetElement) {
|
|
182
|
+
e.preventDefault();
|
|
183
|
+
e.stopPropagation();
|
|
184
|
+
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
185
|
+
let startTime = performance.now();
|
|
186
|
+
let loop = function (nowTime) {
|
|
187
|
+
let time = nowTime - startTime;
|
|
188
|
+
let normalizedTime = time / duration;
|
|
189
|
+
if (normalizedTime < 1) {
|
|
190
|
+
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
191
|
+
requestAnimationFrame(loop);
|
|
192
|
+
} else {
|
|
193
|
+
window.scrollTo(0, targetPosition);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
requestAnimationFrame(loop);
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
};
|
|
200
|
+
}
|
|
201
|
+
obs01.disconnect();
|
|
202
|
+
}
|
|
203
|
+
obs01 = new MutationObserver(call01);
|
|
204
|
+
obs01.observe(ttt, options);
|
|
205
|
+
```
|
|
206
|
+
元々あるアンカーはスムーズスクロールするようになりました。
|
|
207
|
+
しかし追加したリンクは配列が空になってしまします。どうすればいいでしょうか。
|
|
128
208
|
|
|
129
209
|
### 補足情報（FW/ツールのバージョンなど）
|
|
130
210
|
Firefox 最新版
|
3
修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
動的に追加したアンカーリンクがスムーズスクロールしない
|
body
CHANGED
|
File without changes
|
2
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -65,6 +65,66 @@
|
|
|
65
65
|
|
|
66
66
|
ご助力いただけますと大変助かります。
|
|
67
67
|
|
|
68
|
+
### 追記
|
|
69
|
+
```js
|
|
70
|
+
/* smooth scroll --------------------------------------------- */
|
|
71
|
+
let Ease = {
|
|
72
|
+
easeInOut: function (t) {
|
|
73
|
+
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
let duration = 1200;
|
|
77
|
+
ttt = document;
|
|
78
|
+
options = {
|
|
79
|
+
childList: true,
|
|
80
|
+
characterData: true,
|
|
81
|
+
characterDataOldValue: true,
|
|
82
|
+
attributes: true,
|
|
83
|
+
subtree: true,
|
|
84
|
+
}
|
|
85
|
+
function call01(mutationsList) {
|
|
86
|
+
for (const mutation of mutationsList) {
|
|
87
|
+
tar = mutation.target // target
|
|
88
|
+
add = mutation.addedNodes // add DOM
|
|
89
|
+
remove = mutation.removedNodes // delate DOM
|
|
90
|
+
anchorLinks = [].slice.call(tar.querySelectorAll('a[href^="#"]'));
|
|
91
|
+
console.log(anchorLinks);
|
|
92
|
+
for(const anchorLink of anchorLinks) {
|
|
93
|
+
console.log(anchorLink);
|
|
94
|
+
anchorLink.addEventListener('click', function (e) {
|
|
95
|
+
let href = anchorLink.getAttribute('href');
|
|
96
|
+
let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
|
97
|
+
let targetElement = document.getElementById(href.replace('#', ''));
|
|
98
|
+
if (targetElement) {
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
e.stopPropagation();
|
|
101
|
+
let targetPosition = window.pageYOffset + targetElement.getBoundingClientRect().top - 115;
|
|
102
|
+
let startTime = performance.now();
|
|
103
|
+
let loop = function (nowTime) {
|
|
104
|
+
let time = nowTime - startTime;
|
|
105
|
+
let normalizedTime = time / duration;
|
|
106
|
+
if (normalizedTime < 1) {
|
|
107
|
+
window.scrollTo(0, currentPosition + ((targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)));
|
|
108
|
+
requestAnimationFrame(loop);
|
|
109
|
+
} else {
|
|
110
|
+
window.scrollTo(0, targetPosition);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
requestAnimationFrame(loop);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
obs01.disconnect();
|
|
119
|
+
}
|
|
120
|
+
obs01 = new MutationObserver(call01);
|
|
121
|
+
obs01.observe(ttt, options);
|
|
122
|
+
/* smooth scroll ----------------------------------------- end */
|
|
123
|
+
```
|
|
124
|
+
MutationObserverを使って書き直したところ、
|
|
125
|
+
anchorLinks, anchorLink の値が取得できる時と、配列が空の時で安定しませんでした。
|
|
126
|
+
どうすれば安定するでしょうか。
|
|
68
127
|
|
|
128
|
+
|
|
69
129
|
### 補足情報（FW/ツールのバージョンなど）
|
|
70
130
|
Firefox 最新版
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
```
|
|
51
51
|
```html
|
|
52
52
|
<header>
|
|
53
|
-
<a href="#link">dummy</a>
|
|
53
|
+
<a href="#link">dummy</a> <!-- これがスムーズスクロールしない -->
|
|
54
54
|
</header>
|
|
55
55
|
|
|
56
56
|
<section id="link">
|