質問編集履歴
8
リンク先の変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[
|
|
1
|
+
[in-view.js](https://github.com/camwiegert/in-view)というライブラリを使って、スクロールするとアニメーションで出てくるページにアンカーリンクで遷移するとidを設定した箇所ではなく、最下部までいってしまい、CSSも切り替わらずヘッダーとフッター以外は真っ白になります。
|
|
2
2
|
この現象はSafariとFirefoxにだけみられます。
|
|
3
3
|
スクロールするとDOM操作でCSSを上書きして要素が現れるようにしてます。
|
|
4
4
|
|
7
in-view.jsのリンク先
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
目的の要素までページ外遷移で移動して、同ページの他の要素は既に表示された状態にしたいです。
|
|
7
7
|
|
|
8
8
|
---
|
|
9
|
-
[
|
|
9
|
+
[in-view.js](https://github.com/camwiegert/in-view)
|
|
10
10
|
```javascrip
|
|
11
11
|
<script>
|
|
12
12
|
inView.offset(400);
|
6
URIフラグメントの変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
```
|
|
75
75
|
##想定しているURIフラグメントとhtml
|
|
76
76
|
```
|
|
77
|
-
http://localhost:8080/
|
|
77
|
+
http://localhost:8080/flow/#waribiki
|
|
78
78
|
```
|
|
79
79
|
長いので、申し訳ないですがGoogle Driveにて共有させていただきます。
|
|
80
80
|
[HTMLファイル](https://drive.google.com/file/d/1yOEuUxhe1Bq-JsQIqsVriF_8m9acRfqy/view?usp=sharing)
|
5
HTMLファイル、URIフラグメントの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -71,4 +71,10 @@
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
</script>
|
|
74
|
-
```
|
|
74
|
+
```
|
|
75
|
+
##想定しているURIフラグメントとhtml
|
|
76
|
+
```
|
|
77
|
+
http://localhost:8080/test/#waribiki
|
|
78
|
+
```
|
|
79
|
+
長いので、申し訳ないですがGoogle Driveにて共有させていただきます。
|
|
80
|
+
[HTMLファイル](https://drive.google.com/file/d/1yOEuUxhe1Bq-JsQIqsVriF_8m9acRfqy/view?usp=sharing)
|
4
変数をconst eventからlet event に変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
if (target.length) {
|
|
65
65
|
let test = document.getElementById(target)
|
|
66
66
|
let position = test.getBoundingClientRect();
|
|
67
|
-
|
|
67
|
+
let event = document.getElementsByClassName('fadein');
|
|
68
68
|
event.classList.remove('fadein');
|
|
69
69
|
window.scroll(0, position)
|
|
70
70
|
}
|
3
タグの削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
2
タグの順番の変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
1
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,28 +8,7 @@
|
|
|
8
8
|
---
|
|
9
9
|
[inview.js](https://github.com/protonet/jquery.inview?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library)
|
|
10
10
|
```javascrip
|
|
11
|
-
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
|
12
11
|
<script>
|
|
13
|
-
$(window).on('load', function() {
|
|
14
|
-
$(function() {
|
|
15
|
-
let url = location.href;
|
|
16
|
-
if (url.indexOf("?id=") != -1) {
|
|
17
|
-
let id = url.split("?id=");
|
|
18
|
-
let $target = $('#' + id[id.length - 1]);
|
|
19
|
-
if ($target.length) {
|
|
20
|
-
let position = $target.offset().top;
|
|
21
|
-
const event = document.getElementsByClassName('fadein');
|
|
22
|
-
event.classList.remove('fadein');
|
|
23
|
-
$("html, body").animate({
|
|
24
|
-
scrollTop: position
|
|
25
|
-
}, 1);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
})
|
|
30
|
-
</script>
|
|
31
|
-
|
|
32
|
-
<script>
|
|
33
12
|
inView.offset(400);
|
|
34
13
|
inView('.fadein')
|
|
35
14
|
.on('enter', el => {
|