未入力だとエラー <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>
.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; }
$(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' ); }); });