Question

我正在创建包含必填字段的查询表单。当用户按下提交按钮时，显示错误列表供用户纠正。此列表是一组与所需字段相关的标签，当用户单击它们时，它们将被带到相关的输入框。滚动在输入框处停止，并且不显示输入的实际标签。

当用户选择错误输入时，如何设置，网站向上滚动以包含标签输入？

谢谢：）

Answer 1

你只需要从你想要滚动到示例

的元素的顶部偏移量中减去一些东西

$(".error-massage").click(function(){
    var l = $(this).attr("data-label");
    top_Offset = $("*[label='" + l +"']").offset().top;
    $(window).scrollTop(top_Offset - 100 + "px")
})

考虑到您的错误按摩列表就像

<ul>
 <li class="error-massage" data-label="name">invalid name </li>
 <li class="error-massage" data-label="pass">invalid pass</li>
 <li class="error-massage" data-label="somthing">invalid somthing</li>
</ul>

Answer 2

在相关无效输入的ID中加入锚点

<ul>
 <li class="error-massage">
   <a href="#input-name">invalid name</a>
 </li>
 <li class="error-massage">
   <a href="#input-pass">invalid pass</a>
 </li>
 <li class="error-massage">
   <a href="#input-something">invalid something</a>
 </li>
</ul>

不需要JS。

表单验证 - 滚动过去的输入框

2 个答案: