質問編集履歴
5
説明文をわかりやすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
</ul>
|
|
16
16
|
</nav>
|
|
17
17
|
</header>
|
|
18
|
-
<div id="main"
|
|
18
|
+
<div id="main">メイン</div>
|
|
19
|
-
<div id="features"
|
|
19
|
+
<div id="features">特徴</div>
|
|
20
|
-
<div id="price"
|
|
20
|
+
<div id="price">価格</div>
|
|
21
|
-
<div id="contact"
|
|
21
|
+
<div id="contact">お問い合わせ</div>
|
|
22
22
|
<footer id="footer">フッター</footer>
|
|
23
23
|
```
|
|
24
24
|
```CSS
|
4
説明文をわかりやすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -27,11 +27,15 @@
|
|
|
27
27
|
}
|
|
28
28
|
```
|
|
29
29
|
```jQuery
|
|
30
|
+
$(function () {
|
|
31
|
+
|
|
30
|
-
$("a[href^='#']:not([href='#'])").click(function () {
|
|
32
|
+
$("a[href^='#']:not([href='#'])").click(function () {
|
|
31
|
-
|
|
33
|
+
var target = $($(this).attr("href")).offset().top;
|
|
32
|
-
|
|
34
|
+
target -= 80;
|
|
33
|
-
|
|
35
|
+
$("html, body").animate({ scrollTop: target }, 500);
|
|
34
|
-
|
|
36
|
+
return false;
|
|
37
|
+
});
|
|
38
|
+
|
|
35
39
|
});
|
|
36
40
|
```
|
|
37
41
|
実はこのjQueryのコードは問題なく動いてくれます。
|
|
@@ -44,32 +48,32 @@
|
|
|
44
48
|
jQueryを次のように書き加えました。
|
|
45
49
|
|
|
46
50
|
```jQuery
|
|
51
|
+
$(function () {
|
|
52
|
+
|
|
47
53
|
$(window).on('load resize', function () {
|
|
48
54
|
|
|
49
55
|
var w = $(window).width();
|
|
50
56
|
var x = 768;
|
|
51
57
|
|
|
52
58
|
if (w < x) {
|
|
53
|
-
|
|
54
59
|
$("a[href^='#']:not([href='#'])").click(function () {
|
|
55
60
|
var target = $($(this).attr("href")).offset().top;
|
|
56
61
|
target -= 80;
|
|
57
62
|
$("html, body").animate({ scrollTop: target }, 500);
|
|
58
63
|
return false;
|
|
59
64
|
});
|
|
60
|
-
|
|
61
65
|
} else {
|
|
62
|
-
|
|
63
66
|
$("a[href^='#']:not([href='#'])").click(function () {
|
|
64
67
|
var target = $($(this).attr("href")).offset().top;
|
|
65
68
|
target -= 200;
|
|
66
69
|
$("html, body").animate({ scrollTop: target }, 500);
|
|
67
70
|
return false;
|
|
68
71
|
});
|
|
69
|
-
|
|
70
72
|
}
|
|
71
73
|
|
|
72
74
|
});
|
|
75
|
+
|
|
76
|
+
});
|
|
73
77
|
```
|
|
74
78
|
|
|
75
79
|
if関数を使って、768px以上のときと768px未満の場合を分けています。
|
|
@@ -81,6 +85,7 @@
|
|
|
81
85
|
|
|
82
86
|
Windowsパソコンで作っているのですが、グーグルクロームはおおむね希望通りの動きをします。
|
|
83
87
|
しかしFirefoxだとスムーズスクロールせず、直接該当部分に飛びます。
|
|
88
|
+
たまにきちんと動くときもありますが、何度も試しているときちんと動かないことが多いです。
|
|
84
89
|
|
|
85
90
|
Macパソコンでも、グーグルクロームは希望通りの動きをしますが、
|
|
86
91
|
ほかのブラウザはすべて挙動がおかしいです。
|
3
説明文をわかりやすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
そこで大きな画面のときと小さな画面のときとで、スクロール距離を変えようと思い、
|
|
44
44
|
jQueryを次のように書き加えました。
|
|
45
45
|
|
|
46
|
-
```
|
|
46
|
+
```jQuery
|
|
47
47
|
$(window).on('load resize', function () {
|
|
48
48
|
|
|
49
49
|
var w = $(window).width();
|
2
説明文をわかりやすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
大きな画面のときと小さな画面のときと異なります。
|
|
42
42
|
|
|
43
43
|
そこで大きな画面のときと小さな画面のときとで、スクロール距離を変えようと思い、
|
|
44
|
-
jQueryを次のように書き
|
|
44
|
+
jQueryを次のように書き加えました。
|
|
45
45
|
|
|
46
46
|
```ここに言語を入力
|
|
47
47
|
$(window).on('load resize', function () {
|
1
説明文をわかりやすくしました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
</ul>
|
|
16
16
|
</nav>
|
|
17
17
|
</header>
|
|
18
|
-
|
|
18
|
+
<div id="main" class="main">メイン</div>
|
|
19
|
-
|
|
19
|
+
<div id="features" class="features">特徴</div>
|
|
20
|
-
|
|
20
|
+
<div id="price" class="price">価格</div>
|
|
21
|
-
|
|
21
|
+
<div id="contact" class="contact">お問い合わせ</div>
|
|
22
22
|
<footer id="footer">フッター</footer>
|
|
23
23
|
```
|
|
24
24
|
```CSS
|