質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

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

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

2回答

4957閲覧

jqueryを使ってページ内遷移させる(animate)

SatokoKugo

総合スコア20

jQueryプラグイン

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

JavaScript

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/03/13 06:09

編集2018/03/13 09:09

前提・実現したいこと

ここのサイトを参考。
「解約・退会手続きナビゲーション」のボタンを押すと下にスクロールされるのを真似したいです。

試したこと

もともと入れているスムーススクロールのコードです。

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が表示された際にスクロールして真ん中にくる(上に書いた参考の通り)をやりたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

これは、動かないですね。
なぜなら、javascriptで指定しているのは、
aタグに対して、スムーススクロールを効かせるイベントをつけているので。

ですが、質問者さんがやろうとしていることは、radioボタンの変化で、スムーススクロールをきかせたいってことですよね?

js部分を下記に変えましょう。
既に書いてるスムーススクロールの記述は消してください。

javascript

1$(function(){ 2// ラジオボタン2段階で表示 3document.addEventListener('change',function(e){ 4 var t=e.target; 5 if(t.name=="move"){ 6 Array.prototype.forEach.call(document.querySelectorAll('.second,.third'),function(x){ 7 if(x.id==t.value){ 8 x.style.display="block"; 9 Array.prototype.forEach.call(x.querySelectorAll('[type=radio]'),function(y){ 10 y.checked=false; 11 }); 12 13 // ここでスムーススクロールを実行 14 var speed = 800; // ミリ秒で記述 15 // アンカーの値取得 16 // 移動先を数値で取得 17 var position = $(x).offset().top; 18 // スムーススクロール 19 $("html, body").animate({scrollTop:position}, speed, "swing"); 20 }else{ 21 x.style.display="none"; 22 } 23 }); 24 } 25 if(t.name=="grade"){ 26 Array.prototype.forEach.call(document.querySelectorAll('.third'),function(x){ 27 x.style.display=(x.id==t.value)?"block":"none"; 28 // ここでスムーススクロールを実行 29 if (x.id==t.value) { 30 var speed = 800; // ミリ秒で記述 31 // アンカーの値取得 32 // 移動先を数値で取得 33 var position = $(x).offset().top; 34 // スムーススクロール 35 $("html, body").animate({scrollTop:position}, speed, "swing"); 36 } 37 38 }); 39 } 40}); 41 42});

これ普通に動くと思いますが。

質問者さんは、やってみたが動かなかった、ってことでよろしいですか?
動かなかったのであれば、
htmlコードの記載も含めないと、答えようがないと思います。

私は、下記のコードで動きました。

html

1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 7 8</head> 9<body> 10 11<p><a href="#radio_button_1">↓スクロールさせたい↓</a></p> 12 13<div class="second" id="radio_button_1" style="margin-top: 1000px;"> 14<div class="radio_button_box"> 15<label><input type="radio" name="grade" value="e">あああ</label><br /> 16<label><input type="radio" name="grade" value="b-2">いいい</label> 17</div> 18</div> 19 20 21<script> 22/*ページ内リンクのスムーススクロール*/ 23$(function(){ 24 // #で始まるリンクをクリックしたら実行されます 25 $('a[href^="#"]').click(function(){ 26 // スクロールの速度 27 var speed = 800; // ミリ秒で記述 28 // アンカーの値取得 29 var href= $(this).attr("href"); 30 // 移動先を取得 31 var target = $(href == "#" || href == "" ? 'html' : href); 32 // 移動先を数値で取得 33 var position = target.offset().top; 34 // スムーススクロール 35 $("html, body").animate({scrollTop:position}, speed, "swing"); 36 return false; 37 }); 38}); 39 40</script> 41</body> 42</html>

もしかして、当該コード6行目に入れています、jQueryを読み込んでいない、とかありませんでしょうか?
このコードは、jQueryを使っているので、
読み込まなければ、動きません。

投稿2018/03/13 06:24

編集2018/03/13 09:09
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SatokoKugo

2018/03/13 07:24

jQueryは読み込んでいます。htmlに対して特に記述を入れてないせいかと思うのですが どのように記述したらいいのか分からず質問させて頂きました。
miyabi_takatsuk

2018/03/13 07:26

SatokoKugoさん> なるほど・・・。 HTML全体と、 読み込んでいる、CSS、JavaScriptも記載していただけないでしょうか?
SatokoKugo

2018/03/13 08:28

追記させて頂きました!
SatokoKugo

2018/03/13 09:23

自分でも色々やってみて出来た後に見させて頂きました。 記載どおりのjsで上手くいきましたので高評価ですが、押させて頂きました。 ありがとうございます。
guest

0

自己解決

js

1// スクロール 2$(document).on("click", "[id^='radio_button_']", function() { 3 //押されたボタンのIDから番号を取得します。 4 var button_id = $(this).attr('id').replace('radio_button_', ''); 5 //移動する先のDIVの位置を取得します。 6 var position = $('#radio_button_' + button_id).offset().top; 7 //animateを使用して移動します。 8 $("html, body").animate({scrollTop:position}, 500, "linear"); 9 }); 10

これを追加したところ上手くいきました。

投稿2018/03/13 09:18

SatokoKugo

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2018/03/13 09:23

スマートに書けていて、素晴らしいと思います。 お疲れ様でした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問