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

回答編集履歴

3

質問者の追記を受けて、内容修正

2018/03/13 09:09

投稿

miyabi_pudding
miyabi_pudding

スコア9570

answer CHANGED
@@ -1,10 +1,66 @@
1
- これ普通にくと思
1
+ これは、かな
2
+ なぜなら、javascriptで指定しているのは、
3
+ aタグに対して、スムーススクロールを効かせるイベントをつけているので。
2
4
 
5
+ ですが、質問者さんがやろうとしていることは、radioボタンの変化で、スムーススクロールをきかせたいってことですよね?
6
+
7
+ js部分を下記に変えましょう。
8
+ 既に書いてるスムーススクロールの記述は消してください。
9
+
10
+ ```javascript
11
+ $(function(){
12
+ // ラジオボタン2段階で表示
13
+ document.addEventListener('change',function(e){
14
+ var t=e.target;
15
+ if(t.name=="move"){
16
+ Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){
17
+ if(x.id==t.value){
18
+ x.style.display="block";
19
+ Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){
20
+ y.checked=false;
21
+ });
22
+
23
+ // ここでスムーススクロールを実行
24
+ var speed = 800; // ミリ秒で記述
25
+ // アンカーの値取得
26
+ // 移動先を数値で取得
27
+ var position = $(x).offset().top;
28
+ // スムーススクロール
29
+ $("html, body").animate({scrollTop:position}, speed, "swing");
30
+ }else{
31
+ x.style.display="none";
32
+ }
33
+ });
34
+ }
35
+ if(t.name=="grade"){
36
+ Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){
37
+ x.style.display=(x.id==t.value)?"block":"none";
38
+ // ここでスムーススクロールを実行
39
+ if (x.id==t.value) {
40
+ var speed = 800; // ミリ秒で記述
41
+ // アンカーの値取得
42
+ // 移動先を数値で取得
43
+ var position = $(x).offset().top;
44
+ // スムーススクロール
45
+ $("html, body").animate({scrollTop:position}, speed, "swing");
46
+ }
47
+
48
+ });
49
+ }
50
+ });
51
+
52
+ });
53
+ ```
54
+
55
+
56
+
57
+ ~~これ普通に動くと思いますが。~~
58
+
3
59
  ~~質問者さんは、やってみたが動かなかった、ってことでよろしいですか?
4
60
  動かなかったのであれば、
5
61
  htmlコードの記載も含めないと、答えようがないと思います。~~
6
62
 
7
- 私は、下記のコードで動きました。
63
+ ~~私は、下記のコードで動きました。~~
8
64
 
9
65
  ```html
10
66
  <!DOCTYPE html>
@@ -51,6 +107,6 @@
51
107
  </html>
52
108
  ```
53
109
 
54
- もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか?
110
+ ~~もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか?
55
111
  このコードは、jQueryを使っているので、
56
- 読み込まなければ、動きません。
112
+ 読み込まなければ、動きません。~~

2

若干、文言や、marginなど修正。

2018/03/13 09:09

投稿

miyabi_pudding
miyabi_pudding

スコア9570

answer CHANGED
@@ -17,9 +17,9 @@
17
17
  </head>
18
18
  <body>
19
19
 
20
- <p><a href="#radio_button_1">スクロールさせたい</a></p>
20
+ <p><a href="#radio_button_1">スクロールさせたい</a></p>
21
21
 
22
- <div class="second" id="radio_button_1" style="margin: 1000px;">
22
+ <div class="second" id="radio_button_1" style="margin-top: 1000px;">
23
23
  <div class="radio_button_box">
24
24
  <label><input type="radio" name="grade" value="e">あああ</label><br />
25
25
  <label><input type="radio" name="grade" value="b-2">いいい</label>

1

質問の修正を受けて、回答を修正

2018/03/13 07:06

投稿

miyabi_pudding
miyabi_pudding

スコア9570

answer CHANGED
@@ -1,5 +1,56 @@
1
1
  これ普通に動くと思いますが。
2
2
 
3
- 質問者さんは、やってみたが動かなかった、ってことでよろしいですか?
3
+ ~~質問者さんは、やってみたが動かなかった、ってことでよろしいですか?
4
4
  動かなかったのであれば、
5
- htmlコードの記載も含めないと、答えようがないと思います。
5
+ htmlコードの記載も含めないと、答えようがないと思います。~~
6
+
7
+ 私は、下記のコードで動きました。
8
+
9
+ ```html
10
+ <!DOCTYPE html>
11
+ <html lang="jp">
12
+ <head>
13
+ <meta charset="utf-8">
14
+ <title></title>
15
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
16
+
17
+ </head>
18
+ <body>
19
+
20
+ <p><a href="#radio_button_1">スクロールさせたい</a></p>
21
+
22
+ <div class="second" id="radio_button_1" style="margin: 1000px;">
23
+ <div class="radio_button_box">
24
+ <label><input type="radio" name="grade" value="e">あああ</label><br />
25
+ <label><input type="radio" name="grade" value="b-2">いいい</label>
26
+ </div>
27
+ </div>
28
+
29
+
30
+ <script>
31
+ /*ページ内リンクのスムーススクロール*/
32
+ $(function(){
33
+ // #で始まるリンクをクリックしたら実行されます
34
+ $('a[href^="#"]').click(function(){
35
+ // スクロールの速度
36
+ var speed = 800; // ミリ秒で記述
37
+ // アンカーの値取得
38
+ var href= $(this).attr("href");
39
+ // 移動先を取得
40
+ var target = $(href == "#" || href == "" ? 'html' : href);
41
+ // 移動先を数値で取得
42
+ var position = target.offset().top;
43
+ // スムーススクロール
44
+ $("html, body").animate({scrollTop:position}, speed, "swing");
45
+ return false;
46
+ });
47
+ });
48
+
49
+ </script>
50
+ </body>
51
+ </html>
52
+ ```
53
+
54
+ もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか?
55
+ このコードは、jQueryを使っているので、
56
+ 読み込まなければ、動きません。