如果复选框cheked去显示div

Question

我有5个复选框和5个div。如果选中复选框，则div为.show else div为hide。复选框具有固定位置，滚动部分打开div。如果选中复选框，我需要添加功能 - >显示div并转到div

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当条件语句求值为.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

尝试这个

$(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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;