替换IE中的滚动顶部以使区域正确滚动到

问题描述

例如，当我在表单上有一个验证摘要并单击带有错误的相关<a href="#error1">Error 1...</a>标记时，相关字段将滚动到，但是由于滚动值，它在视图中无法正确滚动不会添加固定标头的像素。通过添加

，我在Chrome等中轻松解决了此问题

html {
  scroll-padding-top: 150px;
}

但是，这在IE中不起作用。我搜索了堆栈溢出，但找不到任何有效的方法。非常感谢您的帮助。

解决方法

scroll-padding-top在CSS中没有等效项，因此我们不能仅使用CSS在IE中解决该问题。在IE中，我们可以计算要到达的元素的偏移量，然后在单击链接时使用jQuery滚动到它。 onclick函数如下所示：

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
    var h1 = $("#error1").offset().top;
    $('html,body').animate({ scrollTop: h1 - 150 });
}

我也制作了simple sample，您可以参考它。 IE和Chrome中的结果相同。

IE中的结果：

如果仍然无法解决您的问题，请提供您的情况a minimal,reproducible code sample，以便我们进行测试并了解如何提供帮助。