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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1848閲覧

jQueryを用いたアコーディオンパネルの改修

shururi

総合スコア7

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/05/09 04:02

###前提・実現したいこと
jQueryを用いたアコーディオンパネルで、ボタンを押してコンテンツをドロップダウンで開く仕様のものに、
ボタンをクリックした際に、開いたコンテンツの冒頭がブラウザのトップにくるようジャンプするような動きを追加したいです。(開いたコンテンツが縦に長い内容のため、少しでもしっかりとブラウザに表示されるようにしたい)

初心者の質問でたいへん恐縮ですが、どなたかご教示いただけないでしょうか?

###該当のソースコード

HTML

1<div class="contents"> 2hogehoge 3</div> 4<div class="btn_area"> 5<a><img class="contents_btn" src="img/pc/btn_open.png" alt="" /></a> 6</div>

CSS

1.contents { 2 display:none; 3}

JavaScript

1$(function() { 2 $(".contents_btn").toggle( 3 function() { 4 $(this).attr('src', 'img/pc/btn_close.png'); 5 $(".contents").slideDown("slow"); 6 }, 7 function() { 8 $(this).attr('src', 'img/pc/btn_open.png'); 9 $(".contents").slideUp("slow"); 10 } 11 ); 12});

###試したこと

<div class="contents">を<div id="contents">の入れ子とし、 ボタンの<a><img class="contents_btn" src="img/pc/btn_open.png" alt="" /></a>に <a href="#contents">とアンカーリンクを設定しても、リンクが効かないようでした。

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

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

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

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

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

kei344

2017/05/09 04:06

contentsは質問文には1つしかありませんが、複数使用したりする予定はありますか?
shururi

2017/05/09 04:08

ご質問ありがとうございます。 contentsが複数になる予定はございません。
kei344

2017/05/11 08:59

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
shururi

2017/05/11 09:09

失礼しました。「解決済」とさせていただきました。
guest

回答1

0

ベストアンサー

btn_area を contents の上に移動して、
btn_areaクリック時に、offset()でボタンのtopの位置をとって、
その場所に、scrollTop()で移動すればどうでしょうか?

JavaScript

1$(window).scrollTop($(this).offset().top);

###追記(ボタンを移動したくない場合)
これでどうでしょう?

JavaScript

1$(window).scrollTop($(this).prev("div.contents").offset().top);

###追記(動くもの)

JavaScript

1$(function() { 2 $(".contents_btn").on("click", function() { 3 var btnObj = $(this); 4 var contentsObj = btnObj.closest("div.btn_area").prev("div.contents"); 5 btnObj.attr("alt", contentsObj.is(":hidden") ? "img/pc/btn_close.png" : "img/pc/btn_open.png"); 6 contentsObj.slideToggle("slow"); 7 $(window).scrollTop(contentsObj.offset().top); 8 }); 9});

投稿2017/05/09 05:04

編集2017/05/10 06:27
root_jp

総合スコア4666

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

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

shururi

2017/05/09 05:11

ご回答ありがとうございます! >btn_area を contents の上に移動して、 とのことでしたが、ボタンを押した後、コンテンツの下に「コンテンツを閉じる」ボタンとしておいておきたいので、コンテンツの下にボタン、という位置関係は変更しないで動きを実装できないかと考えています。そうなりますとどのようなコードとなりますでしょうか・・ お手数ですが、その旨合わせて、もし解決策ございましたらご教示いただけますと幸いです。
root_jp

2017/05/09 05:28

追記しました。
shururi

2017/05/10 04:03

返信が遅くなりまして申し訳ありません。 いただいたコードをこちらで入れ込んだうえ試してみましたがうまくいかないようです・・ 恐縮ですが既存のjsコードへの入れ込み方まで含めてご教示いただけますでしょうか? 全面的に甘えさせていただくかたちとなりすみません・・ お手数ですがよろしくお願いいたします。
root_jp

2017/05/10 06:22

追記しました。
shururi

2017/05/11 08:06

たびたびご返信が遅くなりまして申し訳ありません・・! ご教示いただいたものを再度当て込んでみましたが、 やはり動かず・・ 細かい部分を調整できるスキルもこちらにございませんため、今回は別の動きを実装する方向で対応したいと思います。 この度は多くのヒントをいただき、本当にありがとうございました。 このようなかたちとなり大変恐縮ですが、今後もご相談させていただければ幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問