チェックボックスにチェックが入っていれば

Question

私は5つのチェックボックスと5つのdivを持っています。チェックボックスがチェックされている場合、divは.show、else divはhideです。チェックボックスは固定された位置にあり、スクロールする部分はdivを開きます。私は、チェックボックスがにチェックイン>ショーのdiv要素である場合、関数を追加し、

$('#first').click(function() { 
 
    if ($(this).is(':checked')) { 
 

 
    $("#fifth").show(400); 
 
    } else { 
 
    $("#fifth").hide(400); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
     <input id="first" type="checkbox" class="styled" checked> 
 
     <label for="checkboxhovuz"> 
 
     On check you g to 5-th div 
 
     </label> 
 

 

 
<div class="row" > 
 
    <br><br><br><br><br><br>text first<br><br><br> 
 
</div> 
 
<div class="row"> 
 
    <br><br><br><br><br><br>text second<br><br><br> 
 
</div> 
 
<div class="row"> 
 
    <br><br><br><br><br><br>text third<br><br><br> 
 
</div> 
 
<div class="row"> 
 
    <br><br><br><br><br><br>text fourth<br><br><br> 
 
</div> 
 
<div class="row" id="fifth"> 
 
    <br><br><br><br><br><br>text fifth<br><br><br> 
 
</div>

Answer 1

をDIVに行く必要があるときに条件文にスクロールに.animate()方法を使用して問題の要素を考えてみましょう例えば、trueに評価されます。

$('html, body').animate({ 
     scrollTop: $("#fifth").offset().top 
    }, 2000); 

コードスニペットデモンストレーション：

$('#first').click(function() { 
 

 
    if ($(this).is(':checked')) { 
 
    
 
    $("#fifth").show(400); 
 
    
 
    $('html, body').animate({ 
 
     scrollTop: $("#fifth").offset().top 
 
    }, 2000); 
 
    
 
    } else { 
 
    
 
    $("#fifth").hide(400); 
 
    
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <input id="first" type="checkbox" class="styled" checked> 
 
    <label for="checkboxhovuz"> 
 
     On check you g to 5-th div 
 
     </label> 
 

 

 
    <div class="row"> 
 
     <br><br><br><br><br><br>text first<br><br><br> 
 
    </div> 
 
    <div class="row"> 
 
     <br><br><br><br><br><br>text second<br><br><br> 
 
    </div> 
 
    <div class="row"> 
 
     <br><br><br><br><br><br>text third<br><br><br> 
 
    </div> 
 
    <div class="row"> 
 
     <br><br><br><br><br><br>text fourth<br><br><br> 
 
    </div> 
 
    <div class="row" id="fifth"> 
 
     <br><br><br><br><br><br>text fifth<br><br><br> 
 
    </div> 
 
    <div class="row"> 
 
     <br><br><br><br><br><br>text sixth<br><br><br> 
 
    </div> 
 
    <div class="row"> 
 
     <br><br><br><br><br><br>text seventh<br><br><br> 
 
    </div> 
 
    <div class="row"> 
 
     <br><br><br><br><br><br>text eigth<br><br><br> 
 
    </div>

Answer 2

は私が持っていたこの1

$(document).ready(function() { 
    if ($('#first').is(':checked')) { 
    $("#fifth").show(400); 
    } else { 
    $("#fifth").hide(400); 
    } 
}); 

Answer 3

がdocument.getElementById('tulantisular').scrollIntoView();

だから、総コードが Scroll/Jump to id without jQuery から取られた、ある追加しよう

$('#first').click(function() { 
 
    if ($(this).is(':checked')) { 
 
    $("#fifth").show(); 
 
    document.getElementById('fifth').scrollIntoView(); 
 
    } else { 
 
    $("#fifth").hide(); 
 
    } 
 
});