teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jQueryでスムーズスクロールを作っているが、画面サイズに応じて処理を変更するコードを加えると動きがおかしくなる

編集履歴

質問編集履歴

5

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

2020/12/08 09:22

投稿

cheshire-cat
cheshire-cat

スコア73

test CHANGED
File without changes
test CHANGED
@@ -32,13 +32,13 @@
32
32
 
33
33
  </header>
34
34
 
35
- <div id="main" class="main">メイン</div>
35
+ <div id="main">メイン</div>
36
36
 
37
- <div id="features" class="features">特徴</div>
37
+ <div id="features">特徴</div>
38
38
 
39
- <div id="price" class="price">価格</div>
39
+ <div id="price">価格</div>
40
40
 
41
- <div id="contact" class="contact">お問い合わせ</div>
41
+ <div id="contact">お問い合わせ</div>
42
42
 
43
43
  <footer id="footer">フッター</footer>
44
44
 

4

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

2020/12/08 09:22

投稿

cheshire-cat
cheshire-cat

スコア73

test CHANGED
File without changes
test CHANGED
@@ -56,15 +56,23 @@
56
56
 
57
57
  ```jQuery
58
58
 
59
- $("a[href^='#']:not([href='#'])").click(function () {
59
+ $(function () {
60
60
 
61
- var target = $($(this).attr("href")).offset().top;
62
61
 
63
- target -= 80;
64
62
 
65
- $("html, body").animate({ scrollTop: target }, 500);
63
+ $("a[href^='#']:not([href='#'])").click(function () {
66
64
 
65
+ var target = $($(this).attr("href")).offset().top;
66
+
67
+ target -= 80;
68
+
69
+ $("html, body").animate({ scrollTop: target }, 500);
70
+
67
- return false;
71
+ return false;
72
+
73
+ });
74
+
75
+
68
76
 
69
77
  });
70
78
 
@@ -90,6 +98,10 @@
90
98
 
91
99
  ```jQuery
92
100
 
101
+ $(function () {
102
+
103
+
104
+
93
105
  $(window).on('load resize', function () {
94
106
 
95
107
 
@@ -101,8 +113,6 @@
101
113
 
102
114
 
103
115
  if (w < x) {
104
-
105
-
106
116
 
107
117
  $("a[href^='#']:not([href='#'])").click(function () {
108
118
 
@@ -116,11 +126,7 @@
116
126
 
117
127
  });
118
128
 
119
-
120
-
121
129
  } else {
122
-
123
-
124
130
 
125
131
  $("a[href^='#']:not([href='#'])").click(function () {
126
132
 
@@ -134,13 +140,15 @@
134
140
 
135
141
  });
136
142
 
137
-
138
-
139
143
  }
140
144
 
141
145
 
142
146
 
143
147
  });
148
+
149
+
150
+
151
+ });
144
152
 
145
153
  ```
146
154
 
@@ -164,6 +172,8 @@
164
172
 
165
173
  しかしFirefoxだとスムーズスクロールせず、直接該当部分に飛びます。
166
174
 
175
+ たまにきちんと動くときもありますが、何度も試しているときちんと動かないことが多いです。
176
+
167
177
 
168
178
 
169
179
  Macパソコンでも、グーグルクロームは希望通りの動きをしますが、

3

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

2020/12/08 09:15

投稿

cheshire-cat
cheshire-cat

スコア73

test CHANGED
File without changes
test CHANGED
@@ -88,7 +88,7 @@
88
88
 
89
89
 
90
90
 
91
- ```ここに言語を入力
91
+ ```jQuery
92
92
 
93
93
  $(window).on('load resize', function () {
94
94
 

2

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

2020/12/08 07:28

投稿

cheshire-cat
cheshire-cat

スコア73

test CHANGED
File without changes
test CHANGED
@@ -84,7 +84,7 @@
84
84
 
85
85
  そこで大きな画面のときと小さな画面のときとで、スクロール距離を変えようと思い、
86
86
 
87
- jQueryを次のように書き直しました。
87
+ jQueryを次のように書き加えました。
88
88
 
89
89
 
90
90
 

1

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

2020/12/08 06:58

投稿

cheshire-cat
cheshire-cat

スコア73

test CHANGED
File without changes
test CHANGED
@@ -32,13 +32,13 @@
32
32
 
33
33
  </header>
34
34
 
35
- <div id="main" class="main">メイン</div>
35
+ <div id="main" class="main">メイン</div>
36
36
 
37
- <div id="features" class="features">特徴</div>
37
+ <div id="features" class="features">特徴</div>
38
38
 
39
- <div id="price" class="price">価格</div>
39
+ <div id="price" class="price">価格</div>
40
40
 
41
- <div id="contact" class="contact">お問い合わせ</div>
41
+ <div id="contact" class="contact">お問い合わせ</div>
42
42
 
43
43
  <footer id="footer">フッター</footer>
44
44