teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

説明文をわかりやすくしました

2020/12/08 09:22

投稿

cheshire-cat
cheshire-cat

スコア73

title CHANGED
File without changes
body CHANGED
@@ -15,10 +15,10 @@
15
15
  </ul>
16
16
  </nav>
17
17
  </header>
18
- <div id="main" class="main">メイン</div>
18
+ <div id="main">メイン</div>
19
- <div id="features" class="features">特徴</div>
19
+ <div id="features">特徴</div>
20
- <div id="price" class="price">価格</div>
20
+ <div id="price">価格</div>
21
- <div id="contact" class="contact">お問い合わせ</div>
21
+ <div id="contact">お問い合わせ</div>
22
22
  <footer id="footer">フッター</footer>
23
23
  ```
24
24
  ```CSS

4

説明文をわかりやすくしました

2020/12/08 09:22

投稿

cheshire-cat
cheshire-cat

スコア73

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
- var target = $($(this).attr("href")).offset().top;
33
+ var target = $($(this).attr("href")).offset().top;
32
- target -= 80;
34
+ target -= 80;
33
- $("html, body").animate({ scrollTop: target }, 500);
35
+ $("html, body").animate({ scrollTop: target }, 500);
34
- return false;
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

説明文をわかりやすくしました

2020/12/08 09:15

投稿

cheshire-cat
cheshire-cat

スコア73

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

説明文をわかりやすくしました

2020/12/08 07:28

投稿

cheshire-cat
cheshire-cat

スコア73

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

説明文をわかりやすくしました

2020/12/08 06:58

投稿

cheshire-cat
cheshire-cat

スコア73

title CHANGED
File without changes
body CHANGED
@@ -15,10 +15,10 @@
15
15
  </ul>
16
16
  </nav>
17
17
  </header>
18
- <div id="main" class="main">メイン</div>
18
+ <div id="main" class="main">メイン</div>
19
- <div id="features" class="features">特徴</div>
19
+ <div id="features" class="features">特徴</div>
20
- <div id="price" class="price">価格</div>
20
+ <div id="price" class="price">価格</div>
21
- <div id="contact" class="contact">お問い合わせ</div>
21
+ <div id="contact" class="contact">お問い合わせ</div>
22
22
  <footer id="footer">フッター</footer>
23
23
  ```
24
24
  ```CSS