回答編集履歴

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

miyabi_takatsuk

miyabi_takatsuk score 8547

2018/03/13 18:09  投稿
これ普通に動くと思いますが。
これは、動かないですね。
なぜなら、javascriptで指定しているのは、
aタグに対して、スムーススクロールを効かせるイベントをつけているので。
ですが、質問者さんがやろうとしていることは、radioボタンの変化で、スムーススクロールをきかせたいってことですよね？
js部分を下記に変えましょう。
既に書いてるスムーススクロールの記述は消してください。
```javascript
$(function(){
// ラジオボタン2段階で表示
document.addEventListener('change',function(e){
 var t=e.target;
 if(t.name=="move"){
   Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){
     if(x.id==t.value){
       x.style.display="block";
       Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){
         y.checked=false;
       });
       // ここでスムーススクロールを実行
       var speed = 800; // ミリ秒で記述
       // アンカーの値取得
       // 移動先を数値で取得
       var position = $(x).offset().top;
       // スムーススクロール
       $("html, body").animate({scrollTop:position}, speed, "swing");
     }else{
       x.style.display="none";
     }
   });
 }
 if(t.name=="grade"){
   Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){
     x.style.display=(x.id==t.value)?"block":"none";
     // ここでスムーススクロールを実行
     if (x.id==t.value) {
         var speed = 800; // ミリ秒で記述
       // アンカーの値取得
       // 移動先を数値で取得
       var position = $(x).offset().top;
       // スムーススクロール
       $("html, body").animate({scrollTop:position}, speed, "swing");
     }
     
   });
 }
});
});
```
~~これ普通に動くと思いますが。~~
~~質問者さんは、やってみたが動かなかった、ってことでよろしいですか？
動かなかったのであれば、
htmlコードの記載も含めないと、答えようがないと思います。~~
私は、下記のコードで動きました。
~~私は、下記のコードで動きました。~~
```html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p><a href="#radio_button_1">↓スクロールさせたい↓</a></p>
<div class="second" id="radio_button_1" style="margin-top: 1000px;">
<div class="radio_button_box">
<label><input type="radio" name="grade" value="e">あああ</label><br />
<label><input type="radio" name="grade" value="b-2">いいい</label>
</div>
</div>
<script>
/*ページ内リンクのスムーススクロール*/
$(function(){
   // #で始まるリンクをクリックしたら実行されます
   $('a[href^="#"]').click(function(){
       // スクロールの速度
       var speed = 800; // ミリ秒で記述
       // アンカーの値取得
       var href= $(this).attr("href");
       // 移動先を取得
       var target = $(href == "#" || href == "" ? 'html' : href);
       // 移動先を数値で取得
       var position = target.offset().top;
       // スムーススクロール
       $("html, body").animate({scrollTop:position}, speed, "swing");
       return false;
   });
});
</script>
</body>
</html>
```
もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか？
~~もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか？
このコードは、jQueryを使っているので、
読み込まなければ、動きません。
読み込まなければ、動きません。~~
2 若干、文言や、marginなど修正。

miyabi_takatsuk

miyabi_takatsuk score 8547

2018/03/13 16:06  投稿
これ普通に動くと思いますが。
~~質問者さんは、やってみたが動かなかった、ってことでよろしいですか？
動かなかったのであれば、
htmlコードの記載も含めないと、答えようがないと思います。~~
私は、下記のコードで動きました。
```html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p><a href="#radio_button_1">スクロールさせたい</a></p>
<p><a href="#radio_button_1">↓スクロールさせたい↓</a></p>
<div class="second" id="radio_button_1" style="margin: 1000px;">
<div class="second" id="radio_button_1" style="margin-top: 1000px;">
<div class="radio_button_box">
<label><input type="radio" name="grade" value="e">あああ</label><br />
<label><input type="radio" name="grade" value="b-2">いいい</label>
</div>
</div>
<script>
/*ページ内リンクのスムーススクロール*/
$(function(){
   // #で始まるリンクをクリックしたら実行されます
   $('a[href^="#"]').click(function(){
       // スクロールの速度
       var speed = 800; // ミリ秒で記述
       // アンカーの値取得
       var href= $(this).attr("href");
       // 移動先を取得
       var target = $(href == "#" || href == "" ? 'html' : href);
       // 移動先を数値で取得
       var position = target.offset().top;
       // スムーススクロール
       $("html, body").animate({scrollTop:position}, speed, "swing");
       return false;
   });
});
</script>
</body>
</html>
```
もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか？
このコードは、jQueryを使っているので、
読み込まなければ、動きません。
1 質問の修正を受けて、回答を修正

miyabi_takatsuk

miyabi_takatsuk score 8547

2018/03/13 16:05  投稿
これ普通に動くと思いますが。
質問者さんは、やってみたが動かなかった、ってことでよろしいですか？
~~質問者さんは、やってみたが動かなかった、ってことでよろしいですか？
動かなかったのであれば、
htmlコードの記載も含めないと、答えようがないと思います。
htmlコードの記載も含めないと、答えようがないと思います。~~
私は、下記のコードで動きました。
```html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p><a href="#radio_button_1">スクロールさせたい</a></p>
<div class="second" id="radio_button_1" style="margin: 1000px;">
<div class="radio_button_box">
<label><input type="radio" name="grade" value="e">あああ</label><br />
<label><input type="radio" name="grade" value="b-2">いいい</label>
</div>
</div>
<script>
/*ページ内リンクのスムーススクロール*/
$(function(){
   // #で始まるリンクをクリックしたら実行されます
   $('a[href^="#"]').click(function(){
       // スクロールの速度
       var speed = 800; // ミリ秒で記述
       // アンカーの値取得
       var href= $(this).attr("href");
       // 移動先を取得
       var target = $(href == "#" || href == "" ? 'html' : href);
       // 移動先を数値で取得
       var position = target.offset().top;
       // スムーススクロール
       $("html, body").animate({scrollTop:position}, speed, "swing");
       return false;
   });
});
</script>
</body>
</html>
```
もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか？
このコードは、jQueryを使っているので、
読み込まなければ、動きません。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る