質問編集履歴
8
リンク先の変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
[inview.js](https://github.com/
|
|
1
|
+
[in-view.js](https://github.com/camwiegert/in-view)というライブラリを使って、スクロールするとアニメーションで出てくるページにアンカーリンクで遷移するとidを設定した箇所ではなく、最下部までいってしまい、CSSも切り替わらずヘッダーとフッター以外は真っ白になります。
|
|
2
2
|
|
|
3
3
|
この現象はSafariとFirefoxにだけみられます。
|
|
4
4
|
|
7
in-view.jsのリンク先
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
-
[inview.js](https://github.com/
|
|
17
|
+
[in-view.js](https://github.com/camwiegert/in-view)
|
|
18
18
|
|
|
19
19
|
```javascrip
|
|
20
20
|
|
6
URIフラグメントの変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
|
|
151
151
|
```
|
|
152
152
|
|
|
153
|
-
http://localhost:8080/
|
|
153
|
+
http://localhost:8080/flow/#waribiki
|
|
154
154
|
|
|
155
155
|
```
|
|
156
156
|
|
5
HTMLファイル、URIフラグメントの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -145,3 +145,15 @@
|
|
|
145
145
|
</script>
|
|
146
146
|
|
|
147
147
|
```
|
|
148
|
+
|
|
149
|
+
##想定しているURIフラグメントとhtml
|
|
150
|
+
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
http://localhost:8080/test/#waribiki
|
|
154
|
+
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
長いので、申し訳ないですがGoogle Driveにて共有させていただきます。
|
|
158
|
+
|
|
159
|
+
[HTMLファイル](https://drive.google.com/file/d/1yOEuUxhe1Bq-JsQIqsVriF_8m9acRfqy/view?usp=sharing)
|
4
変数をconst eventからlet event に変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
|
|
131
131
|
let position = test.getBoundingClientRect();
|
|
132
132
|
|
|
133
|
-
|
|
133
|
+
let event = document.getElementsByClassName('fadein');
|
|
134
134
|
|
|
135
135
|
event.classList.remove('fadein');
|
|
136
136
|
|
3
タグの削除
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
2
タグの順番の変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
File without changes
|
1
コードの修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -17,48 +17,6 @@
|
|
|
17
17
|
[inview.js](https://github.com/protonet/jquery.inview?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library)
|
|
18
18
|
|
|
19
19
|
```javascrip
|
|
20
|
-
|
|
21
|
-
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
|
22
|
-
|
|
23
|
-
<script>
|
|
24
|
-
|
|
25
|
-
$(window).on('load', function() {
|
|
26
|
-
|
|
27
|
-
$(function() {
|
|
28
|
-
|
|
29
|
-
let url = location.href;
|
|
30
|
-
|
|
31
|
-
if (url.indexOf("?id=") != -1) {
|
|
32
|
-
|
|
33
|
-
let id = url.split("?id=");
|
|
34
|
-
|
|
35
|
-
let $target = $('#' + id[id.length - 1]);
|
|
36
|
-
|
|
37
|
-
if ($target.length) {
|
|
38
|
-
|
|
39
|
-
let position = $target.offset().top;
|
|
40
|
-
|
|
41
|
-
const event = document.getElementsByClassName('fadein');
|
|
42
|
-
|
|
43
|
-
event.classList.remove('fadein');
|
|
44
|
-
|
|
45
|
-
$("html, body").animate({
|
|
46
|
-
|
|
47
|
-
scrollTop: position
|
|
48
|
-
|
|
49
|
-
}, 1);
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
})
|
|
58
|
-
|
|
59
|
-
</script>
|
|
60
|
-
|
|
61
|
-
|
|
62
20
|
|
|
63
21
|
<script>
|
|
64
22
|
|