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

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

ただいまの
回答率

90.34%

  • JavaScript

    17496questions

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

  • jQuery

    7101questions

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

  • HTML5

    4294questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2207questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • jQueryプラグイン

    541questions

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

アコーディオンメニューで閉じるボタンを押した時にスクロールトップして元の位置に戻したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 3,359

MNZ

score 21

現在サムネイルを押すとそのサムネイルに関する詳細情報がアコーディオンで表示されるものを製作中です。
詳細情報の最後に閉じるボタンを設置しているのですが、閉じるボタンを押すと詳細ページが長いので、思った動きになりません。

閉じるボタンを押すと、詳細情報が閉じ、元のサムネイル位置にスムーススクロールして戻って欲しいです。(例えば、ARTIST 1のサムネイルを押してその詳細情報の最後にある閉じるボタンを押すとARTIST 1のサムネイルのTOPに戻ると言ったような)

また、ARTIST 1を開いた状態で閉じるボタンを押さずにARTIST 2を押した時にもARTIST 01が閉じると言った仕様にできたらベストなのですが、どなたかアコーディオンメニューやjavascriptやjQueryに詳しい方ご教授いただけませんでしょうか。

テストサイトとソースコード一式を掲載させていただきますので、ご協力のほど何卒よろしくお願い致します。


アコーディオンメニューテストサイト
解決したので非表示にさせていただきました。ご協力ありがとうございました。


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>アコーディオンデモ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {

    $('.artistes_main_visual').click(function(){
        $(this).next('.tia_container').slideToggle(600);
    });

    // $('.close').click(function(){
    //     $(this).parent('.tia_container').slideUp(600);
    // });

    $('a[href^="#"]').click(function() {
     $(this).parent('.tia_container').slideUp(1000);

     var speed = 1000;
     var href= $(this).attr("href");
     var target = $(href == "#" || href == "" ? 'html' : href);
     var position = (target.offset().top);
     $('body,html').animate({scrollTop:position}, speed, '');
     return false;
  });

});
</script>
<style>
body {
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 line-height: 1;
}
h2 {
 margin: 0;
 padding: 0;
 font-weight: normal;
}
img {
    width: 100%;
    height: auto;
    vertical-align: top;
}
a {
 display: block;
 color: #fff;
 text-decoration: none;
}
.artistes_main_visual {
    width: 100%;
    height: auto;
    position: relative;
    cursor: pointer;
}
.artistes_main_visual span {
    transition: all 0.3s;
}
.artistes_main_visual span:hover {
    opacity: 0;
}
.artistes_main_visual h2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 32px;
    font-size: 32px;
    line-height: 1;
    text-align: center;
    z-index: 3;
    color: #fff;
}
.tia_container {
    display: none;
    padding-bottom: 100px;
}
.tia_artistes_area {
    position: relative;
    margin: 0 auto;
}
.tia_content_area {
    clear: both;
}
.tia_artistes_area .tia_content_text_area {
    padding: 30px 0 60px;
}
.tia_content_text_area h2 {
    margin-bottom: 24px;
    text-align: center;
    font-size: 24px;
    font-weight: normal;
    line-height: 1;
}
.tia_content_area p {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
    color: #010101;
    font-size: 16px;
    line-height: 1.7;
}
.close {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    margin-top: 100PX;
    padding: 30px 0;
    background-color: blue;
    color: #fff;
    cursor: pointer;
}

.mask {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>

<body>
<div class="article">

<!-- ARTISTE INDEX -->
<div id="artist1" class="artistes_main_visual">
 <span class="mask"></span>
 <img src="assets/images/mainvisual-01.jpg">
 <h2 class="txt">ARTIST 1</h2>
</div>
<div class="tia_container">
 <!-- content_area -->
 <div class="tia_content_area tia_artistes_area">
  <div class="tia_content_text_area">
   <h2>ARTIST 1</h2>
   <p>TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.</p>
  </div>
  <!-- ARTIST IMAGE -->
  <div id="1st" class="artist-image section"><img src="assets/images/BANNER-01.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-02.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-03.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-04.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-05.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-06.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-07.jpg"></div>
  <div class="artist-image tac under250 section"><img src="assets/images/BANNER-08.jpg"></div>
  <!-- ARTIST IMAGE -->
 </div>
 <!-- /content_area -->
 <a class="close" href='#artist1'>CLOSE</a>
</div>
<!-- /ARTISTE INDEX -->

<!-- ARTISTE INDEX -->
<div id="artist2" class="artistes_main_visual">
 <span class="mask"></span>
 <img src="assets/images/mainvisual-02.jpg">
 <h2 class="txt">ARTIST 2</h2>
</div>
<div class="tia_container">
 <!-- content_area -->
 <div class="tia_content_area tia_artistes_area">
  <div class="tia_content_text_area">
   <h2>ARTIST 2</h2>
   <p>TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.</p>
  </div>
  <!-- ARTIST IMAGE -->
  <div id="1st" class="artist-image section"><img src="assets/images/BANNER-01.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-02.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-03.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-04.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-05.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-06.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-07.jpg"></div>
  <div class="artist-image tac under250 section"><img src="assets/images/BANNER-08.jpg"></div>
  <!-- ARTIST IMAGE -->
 </div>
 <!-- /content_area -->
 <a class="close" href='#artist2'>CLOSE</a>
</div>
<!-- /ARTISTE INDEX -->

</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

サムネイルというか、凄く大きい画像に見えるのですが、
例えば開いたアコーディオンには必ず閉じるボタンがあるならば、その閉じるボタンがクリックされたら
ARTIST番号へアンカーリンクで飛ばしちゃえばいいんじゃないですか? (閉じるボタンが見当たりません)

<a href='#ARTIST番号'> 閉じる </a>

   $('a[href^="#"]').click(function() {

      var speed = 1000; 
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = (target.offset().top);
      $('body,html').animate({scrollTop:position}, speed, '');
      return false;
   });

アコーディオンを開く時に、既に開いているアコーディオンを閉じたい場合ですが、
コンテナが開かれたら、現在開かれているコンテナ情報を保持しておき
閉じられたら削除する。
閉じられること無く他のコンテナが開かれたら、保持してあるコンテナを閉じる。

これをスクリプトで書けば良いと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/05 14:05 編集

    shaakさん

    shaakさんのヒントを元にJS直してみたらスクロールしながらARTISTのところに戻りながら閉じるようになりました!ありがとうございます!(こちらのソースコードも書き換えました!)

    アコーディオンを開く時に、既に開いているアコーディオンを閉じるのは書き方がわからないので、調べてやってみます。

    キャンセル

  • 2017/10/05 14:36

    正しい処理ではないですが1番簡単な方法は
    $('.artistes_main_visual').click(function(){
    $(this).next('.tia_container').slideToggle(600);
    });

    ここの処理で、slideToggleするまえに一度全部閉じる処理いれちゃえば実現出来ると思います。

    $('.artistes_main_visual').click(function(){
    $('.tia_container').slideUp(1000);
    $(this).next('.tia_container').slideToggle(600);
    });

    キャンセル

  • 2017/10/05 14:55

    shaakさん

    コメントありがとうございます!
    教えてもらった方法でローカル環境でやってみたのですが、意図した動きになりませんでした。。
    ご教授いただいたのにすみません。。泣

    キャンセル

  • 2017/10/05 14:56

    あら!それは失礼しました。codepenなどで上げてもらえれば直接試せるので楽なんですが

    キャンセル

  • 2017/10/05 15:10

    正しい処理かは置いておいて、考え的にはこんな感じです
    $(function() {

    var current = 0;


    $('.artistes_main_visual').click(function(){

    if(current != 0){
    current.slideUp(600);
    }

    $(this).next('.tia_container').slideToggle(600);
    current = $(this).next('.tia_container');
    flag = true;
    });


    // $('.close').click(function(){
    // $(this).parent('.tia_container').slideUp(600);
    // });

    $('a[href^="#"]').click(function() {
    $(this).parent('.tia_container').slideUp(1000);

    var current = 0;
    var speed = 1000;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = (target.offset().top);
    $('body,html').animate({scrollTop:position}, speed, '');
    return false;
    });

    });
    currentに開いた要素を格納しておいて、閉じられたら中身を0にします。
    どこかのボタンが押されたタイミングで、currentが0でなければその要素にslideupする
    これで取り敢えずは動きます。(正しいかは知りません)

    キャンセル

  • 2017/10/08 11:47

    shaakさん
    ありがとうございます!
    正しい動きではなかったのですが、考え方など教えていただいたので、こちらを元に工夫してみたいと思います!
    本当にありがとうございました!ベストアンサーとさせていただきます!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17496questions

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

  • jQuery

    7101questions

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

  • HTML5

    4294questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2207questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • jQueryプラグイン

    541questions

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