前提・実現したいこと
アコーディオンメニューを展開しつつ、表示されたコンテンツのトップへスクロールさせたいと考えています。
アコーディオンを開閉させるボタンがそれぞれ2カ所あり、どちらも同じ挙動をさせたいです。
もともと開閉するだけで運用しており、スクロールの動きを追加しようと試してみたのですが、オンクリックで複数の動きをさせることができず、行き詰まってしまいました。
JSなどのプログラム言語は、書いてあることがなんとなく分かる程度です。
大変恐縮ですが、ご教示のほどよろしくお願いいたします。
該当のソースコード
[HTML]
HTML
1<section> 2<div> 3<div class="rec03_nbox acd_b" data-target="acd_cnt01"><a href="#rec03_01" data-scroll>バナー01</a></div> 4<div class="rec03_nbox acd_b" data-target="acd_cnt02"><a href="#rec03_02" data-scroll>バナー02</a></div> 5<div class="rec03_nbox acd_b" data-target="acd_cnt03"><a href="#rec03_03" data-scroll>バナー03</a></div> 6<div class="rec03_nbox acd_b" data-target="acd_cnt04"><a href="#rec03_04" data-scroll>バナー04</a></div> 7</div> 8 9<div id="rec03_main"> 10<div id="accordion-43x" class="w1000 accordion-box clear"> 11<dl> 12<dt id="rec03_01" class="acd_b" data-target="acd_cnt01" name="rec03_01">コンテンツ1タイトル</dt> 13<dd id="acd_cnt01" class="acd_cnt"> 14 <div> 15 <p>コンテンツ1</p> 16 </div> 17</dd> 18 19<dt id="rec03_02" class="acd_b" data-target="acd_cnt02">コンテンツ2タイトル</dt> 20<dd id="acd_cnt02" class="acd_cnt"> 21 <div> 22 <p>コンテンツ2</p> 23 </div> 24</dd> 25 26<dt id="rec03_03" class="rec03_b acd_b" data-target="acd_cnt03">コンテンツ3タイトル</dt> 27<dd id="acd_cnt03" class="acd_cnt"> 28 <div> 29 <p>コンテンツ3</p> 30 </div> 31</dd> 32 33<dt id="rec03_04" class="rec03_b acd_b" data-target="acd_cnt04">コンテンツ4タイトル</dt> 34<dd id="acd_cnt04" class="acd_cnt"> 35 <div> 36 <p>コンテンツ4</p> 37 </div> 38</dd> 39</dl> 40 41</div> 42</div> 43</section>
[CSS]
CSS
1.acd_b { 2 cursor: pointer; 3 color: #777 ; 4} 5 6dd.acd_cnt { 7 display: none ; 8}
[JS]※JQuery1.10.1使用
js
1<script> 2$(function(){ 3 $('[data-scroll]').on('click', function() { 4 var speed = 500, 5 $self = $(this), 6 $href = $self.attr('href'), 7 $margin = $self.attr('data-scroll') ? parseInt($self.attr('data-scroll')) : 0, 8 $target = $($href); 9 var pos = ( $target[0] && $target !== '#page_top' ) ? $target.offset().top - $margin : 0; 10 $('html,body').animate({scrollTop: pos}, speed, 'swing'); 11 $self.blur(); 12 return false; 13 });// end function.onClick 14});// end function 15</script> 16<script> 17$(function() 18{ 19 $('.acd_b').click( function() 20 { 21 // [data-target]の属性値を代入する 22 var target = $( this ).data( 'target' ) ; 23 // [target]と同じ名前のIDを持つ要素に[slideToggle()]を実行する 24 $( '#' + target ).slideToggle("slow").scroll() ; 25 //scroll-accordion-top 26 function scroll_top(scrollitem){ 27 28 var position=scrollitem.offset().top; 29 $('body,html').animate({scrollTop:position-10},400); 30 31 } 32 return false; 33 } ) ; 34}) ; 35</script>
試したこと
一度のオンクリックに対して、複数の動きができればと思い、組み合わせをいろいろ試してみましたが、スクロールだけが機能するか全く動かないかのどちらになることが多いです。
上記のJSは参考にさせていただいたスクリプトをやりたいことが分かるよう、元の形で別々にしてあります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/12 02:05