前提・実現したいこと
ここのサイトを参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。
試したこと
もともと入れているスムーススクロールのコードです。
js
1/*ページ内リンクのスムーススクロール*/ 2$(function(){ 3 // #で始まるリンクをクリックしたら実行されます 4 $('a[href^="#"]').click(function(){ 5 // スクロールの速度 6 var speed = 800; // ミリ秒で記述 7 // アンカーの値取得 8 var href= $(this).attr("href"); 9 // 移動先を取得 10 var target = $(href == "#" || href == "" ? 'html' : href); 11 // 移動先を数値で取得 12 var position = target.offset().top; 13 // スムーススクロール 14 $("html, body").animate({scrollTop:position}, speed, "swing"); 15 return false; 16 }); 17}); 18
js
1// ラジオボタン2段階で表示 2document.addEventListener('change',function(e){ 3 var t=e.target; 4 if(t.name=="move"){ 5 Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){ 6 if(x.id==t.value){ 7 x.style.display="block"; 8 Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){ 9 y.checked=false; 10 }); 11 }else{ 12 x.style.display="none"; 13 } 14 }); 15 } 16 if(t.name=="grade"){ 17 Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){ 18 x.style.display=(x.id==t.value)?"block":"none"; 19 }); 20 } 21 }); 22
html
1<div class="radio_button_box"> 2<label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br /> 3<label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label> 4</div> 5 6 7<div class="second" id="radio_button_1"> 8<div class="radio_button_box"> 9<label><input type="radio" name="grade" value="e">あああ</label><br /> 10<label><input type="radio" name="grade" value="b-2">いいい</label> 11</div> 12</div> 13
css
1/* ラジオボタン */ 2[name=status_x] { 3 display: none; 4} 5[name=status_x]+div { 6 display: none; 7} 8[name=status_x]:checked+div { 9 display: block; 10} 11.second , .third{ 12 display: none; 13} 14 15/* ラジオボタン用ボックス */ 16.radio_button_box { 17 border: solid 1px #6091d3; 18 padding: 10px 15px; 19 margin: 5px 0; 20} 21.second .arrow_down , 22.third .arrow_down { 23 margin: 20px 0; 24} 25 26/* わく */ 27.border-box-container2 { 28 border: solid 1px #cccccc; 29 margin-top: 10px; 30 padding: 0 20px 10px; 31 border-radius: 5px; 32 background-color: #f8f8f8; 33} 34
htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。
追記
説明が不十分ですみません。
上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/13 07:24
2018/03/13 07:26
2018/03/13 08:28
2018/03/13 09:23