エラー箇所にスクロール

by bc_rikko

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
未入力だとエラー
<ol>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
  <li><textarea rows="5"></textarea></li>
</ol>

<div id="button">
  <a href="#" id="check">click</a>
</div>

CSS

.error {
  color: red;
  background-color: pink;
}

ul {
  list-style-type: none;
}

li > textarea {
  width: 80%;
}

#button {
  position: fixed;
  top: 10px;
  right: 10px;
}

#check {
  text-decoration: none;
  display: block;
  
  height: 30px;
  width: 80px;
  text-align: center;
  color: white;
  background-color: #55acee;
}

#check:hover {
  background-color: #83c3f3;
}

JavaScript

$(function(){
  var validator = function () {
    $('textarea').each(function (i) {
    if (!$(this).val()) {
        $(this).addClass('error');
      } else {
        $(this).removeClass('error');
      }
    });
  };

  $('#check').click(function(){
    validator();

  	var errorPos = ($('.error:first').offset() && $('.error:first').offset().top) || 0;
    // ずれるときは $().get(0).offsetTop を使う
    $('body').animate(
      {scrollTop: errorPos},
      'slow'
    );
  });
});