Jqueryでトグルするときにdivを強制的にスクロールしますか？

-2

私は、ページをJQueryで開いたウィンドウにジャンプさせようとしていますが、運がないわけではありません。Jqueryでトグルするときにdivを強制的にスクロールしますか？

これは、ボタンの列のためのJavascript（各1は、ウィンドウ内の異なる情報を表示）ウィンドウを開くためにクリックしている：それは開かれ、正常に動作します

<div id="individuals-full"> 
    <h1 style="text-align: center;">Individuals</h1> 
    <ul> 
    <li> 
     <a href="#adjustment-content"> 
     <div id="adjustment-of-status" class="individual-icons">Adjustment of Status</div> 
     </a> 
    </li> 
    <li> 
     <a href="#asylum-content"> 
     <div id="asylum" class="individual-icons">Asylum</div> 
     </a> 
    </li> 
    </ul> 
</div> 

<div id="info-panel"> 
    <div id="adjustment-content" class="toggle" style="display:none"> 
    <hr/> 
    <div class="down-arrow"></div> 
    <h1>Adjustment</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    <div id="asylum-content" class="toggle" style="display:none"> 
    <hr/> 
    <div class="down-arrow"></div> 
    <h1>Asylum</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi 
    tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div> 
</div> 

jQuery("#individuals-full a").click(function(e) { 
    e.preventDefault(); 
    jQuery(".toggle").hide(); 
    var toShow = jQuery(this).attr('href'); 
    jQuery(toShow).show(); 
}); 

function scrollToAnchor(aid) { 
    var aTag = $("a[individuals-full='" + aid + "']"); 
    $('html,body').animate({ 
    scrollTop: aTag.offset().top 
    }, 'slow'); 
} 

$("#individuals-full a").click(function() { 
    scrollToAnchor('#info-panel'); 
});

https://jsfiddle.net/xmb8a26u/2/

、それウィンドウにスクロールしません。もう1つの小さな問題は、ボタンをもう一度クリックしても閉じることができないことです（開いたら、常に開いたままです）。それは大きな問題ではありませんが、それを行うために私が変更できるものがあれば、それが望ましいでしょう。

出典

2017-07-29 cma2032

.toggle（）を使用する必要があります。 DIVを開閉するためのメソッド.. は、ドキュメントを参照してください：http://api.jquery.com/toggle/

出典

2017-07-29 12:14:55 user1744669

のためにこれを使用することができます.togleは、次のボタンがクリックされたときに閉じるため、ブレークします。私はJSFiddleをやって、セクションパートへのジャンプのために私のコードを入れようとしました： https://jsfiddle.net/xmb8a26u/1/ – cma2032

あなたは、私がこれを説明する貧しい仕事をしたスムーズなスクロール

// Smooth scroll 
    $('html, body').animate({ 
    scrollTop: $('#info-panel').offset().top + (0) 
}, 700); 

**Complete Code** 
jQuery("#individuals-full a").click(function(e){ 
e.preventDefault();   
jQuery(".toggle").hide(); 
var toShow = jQuery(this).attr('href'); 
jQuery(toShow).show(); 

// Smooth scroll 
    $('html, body').animate({ 
    scrollTop: $('#info-panel').offset().top + (0) 
}, 700); 

});

出典

2017-07-29 14:52:17 user1744669

$(document).ready(function(){ 
 
$("#adjustment-of-status").click(function(){ 
 
\t $(".toggle:first").css("display","block"); 
 
\t $(".toggle:last").hide(); 
 
\t }); 
 
\t $("#asylum").click(function(){ 
 
\t \t $(".toggle:last").css("display","block"); 
 
\t \t $(".toggle:first").hide(); 
 
}); 
 
\t });

<body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
\t <div id="individuals-full"> 
 
    <h1 style="text-align: center;">Individuals</h1> 
 
    <ul> 
 
    <li> 
 
     <a href="#adjustment-content"> 
 
     <div id="adjustment-of-status" class="individual-icons">Adjustment of Status</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#asylum-content"> 
 
     <div id="asylum" class="individual-icons">Asylum</div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="info-panel"> 
 
    <div id="adjustment-content" class="toggle" style="display:none"> 
 
    <hr/> 
 
    <div class="down-arrow"></div> 
 
    <h1>Adjustment</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    <div id="asylum-content" class="toggle" style="display:none"> 
 
    <hr/> 
 
    <div class="down-arrow"></div> 
 
    <h1>Asylum</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
 
    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi 
 
    tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div> 
 
</div> 
 
</body>

出典

2017-07-30 10:08:09

Jqueryでトグルするときにdivを強制的にスクロールしますか？

答えて

関連する問題