質問編集履歴

6 文法の修正

SatokoKugo

SatokoKugo score 19

2018/03/13 18:09  投稿
ラジオボタンを押すと次のdivにスクロールする
jqueryを使ってページ内遷移させる（animate）
### 前提・実現したいこと
ここの[サイト](https://asahi-net.jp/support/account/resign/new_resign04.html)を参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。
### 試したこと
もともと入れているスムーススクロールのコードです。
```js
/*ページ内リンクのスムーススクロール*/
$(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;
});
});
```
```js
// ラジオボタン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;
});
}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";
});
}
});
```
```html
<div class="radio_button_box">
<label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />
<label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label>
</div>
<div class="second" id="radio_button_1">
<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>
```
```css
/* ラジオボタン */
[name=status_x] {
display: none;
}
[name=status_x]+div {
display: none;
}
[name=status_x]:checked+div {
display: block;
}
.second , .third{
display: none;
}
/* ラジオボタン用ボックス */
.radio_button_box {
border: solid 1px #6091d3;
padding: 10px 15px;
margin: 5px 0;
}
.second .arrow_down ,
.third .arrow_down {
margin: 20px 0;
}
/* わく */
.border-box-container2 {
border: solid 1px #cccccc;
margin-top: 10px;
padding: 0 20px 10px;
border-radius: 5px;
background-color: #f8f8f8;
}
```
htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。
### 追記
説明が不十分ですみません。
上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。
  • JavaScript

    35698 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    22899 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16310 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
  • jQueryプラグイン

    802 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。
5 文法の修正

SatokoKugo

SatokoKugo score 19

2018/03/13 17:29  投稿
### 前提・実現したいこと
ここの[サイト](https://asahi-net.jp/support/account/resign/new_resign04.html)を参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。
### 試したこと
もともと入れているスムーススクロールのコードです。
```js
/*ページ内リンクのスムーススクロール*/
$(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;
});
});
```
```js
// ラジオボタン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;
});
}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";
});
}
});
```
```html
<div class="radio_button_box">
<label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />
<label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label>
</div>
<div class="second" id="radio_button_1">
<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>
```
```css
/* ラジオボタン */
[name=status_x] {
display: none;
}
[name=status_x]+div {
display: none;
}
[name=status_x]:checked+div {
display: block;
}
.second , .third{
display: none;
}
/* ラジオボタン用ボックス */
.radio_button_box {
border: solid 1px #6091d3;
padding: 10px 15px;
margin: 5px 0;
}
.second .arrow_down ,
.third .arrow_down {
margin: 20px 0;
}
/* わく */
.border-box-container2 {
border: solid 1px #cccccc;
margin-top: 10px;
padding: 0 20px 10px;
border-radius: 5px;
background-color: #f8f8f8;
}
```
htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。
### 追記
説明が不十分ですみません。
上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。
  • JavaScript

    35698 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    22899 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16310 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
4 js追記

SatokoKugo

SatokoKugo score 19

2018/03/13 16:46  投稿
ボタンを押すと次のdivにスクロールする
### 前提・実現したいこと
ここの[サイト](https://asahi-net.jp/support/account/resign/new_resign04.html)を参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。
### 試したこと
もともと入れているスムーススクロールのコードです。
```js
/*ページ内リンクのスムーススクロール*/
$(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;
   });
});
```
```js  
// ラジオボタン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;  
           });  
         }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";  
       });  
     }  
   });  
```  
```html
<div class="radio_button_box">
<label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />
<label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label>
</div>
<div class="second" id="radio_button_1">
<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>
```
```css
/* ラジオボタン */
[name=status_x] {
   display: none;
}
[name=status_x]+div {
   display: none;
}
[name=status_x]:checked+div {
   display: block;
}
.second , .third{
   display: none;
}
/* ラジオボタン用ボックス */
.radio_button_box {
   border: solid 1px #6091d3;
   padding: 10px 15px;
   margin: 5px 0;
}
.second .arrow_down ,
.third .arrow_down {
   margin: 20px 0;
}
/* わく */
.border-box-container2 {
   border: solid 1px #cccccc;
   margin-top: 10px;
   padding: 0 20px 10px;
   border-radius: 5px;
   background-color: #f8f8f8;
}
```
 
 
htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。
### 追記
説明が不十分ですみません。
上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。
  • JavaScript

    35698 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    22899 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16310 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
3 css追記

SatokoKugo

SatokoKugo score 19

2018/03/13 16:44  投稿
ボタンを押すと次のdivにスクロールする
### 前提・実現したいこと
ここの[サイト](https://asahi-net.jp/support/account/resign/new_resign04.html)を参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。
### 試したこと
もともと入れているスムーススクロールのコードです。
```js
/*ページ内リンクのスムーススクロール*/
$(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;
   });
});
```
```html
<div class="radio_button_box">
<label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />
<label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label>
</div>
<div class="second" id="radio_button_1">
<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>
```
 
```css  
/* ラジオボタン */  
[name=status_x] {  
   display: none;  
}  
[name=status_x]+div {  
   display: none;  
}  
[name=status_x]:checked+div {  
   display: block;  
}  
.second , .third{  
   display: none;  
}  
 
/* ラジオボタン用ボックス */  
.radio_button_box {  
   border: solid 1px #6091d3;  
   padding: 10px 15px;  
   margin: 5px 0;  
}  
.second .arrow_down ,  
.third .arrow_down {  
   margin: 20px 0;  
}  
 
/* わく */  
.border-box-container2 {  
   border: solid 1px #cccccc;  
   margin-top: 10px;  
   padding: 0 20px 10px;  
   border-radius: 5px;  
   background-color: #f8f8f8;  
}  
 
```  
htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。
### 追記
説明が不十分ですみません。
上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。
  • JavaScript

    35698 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    22899 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16310 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
2 html修正

SatokoKugo

SatokoKugo score 19

2018/03/13 16:23  投稿
ボタンを押すと次のdivにスクロールする
### 前提・実現したいこと
ここの[サイト](https://asahi-net.jp/support/account/resign/new_resign04.html)を参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。
### 試したこと
もともと入れているスムーススクロールのコードです。
```js
/*ページ内リンクのスムーススクロール*/
$(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;
   });
});
```
```html
<div class="radio_button_box">  
<label><input type="radio" name="move" value="radio_button_1" id="radio_button_1">aaaa</label><br />  
<label><input type="radio" name="move" value="radio_button_2" id="radio_button_2">bbbb</label>  
</div>  
 
 
<div class="second" id="radio_button_1">
<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>
```
htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。
簡単なコードで教えて頂ければと思います。
### 追記
説明が不十分ですみません。
上のdivにあるボタンを押すと2つめのdivが表示されるようになっています。
そこで、2つめのdivが表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。
  • JavaScript

    35698 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    22899 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16310 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
1 html追加

SatokoKugo

SatokoKugo score 19

2018/03/13 15:34  投稿
ボタンを押すと次のdivにスクロールする
### 前提・実現したいこと
ここの[サイト](https://asahi-net.jp/support/account/resign/new_resign04.html)を参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。
### 試したこと
もともと入れているスムーススクロールのコードです。
```js
/*ページ内リンクのスムーススクロール*/
$(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;
   });
});
```
 
```html  
<div class="second" id="radio_button_1">  
<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>  
 
```  
htmlはdivで囲っています。classもidも入っています。
簡単なコードで教えて頂ければと思います。
  • JavaScript

    35698 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    22899 questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    16310 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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