这对我有用：

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

jQuery（document）.ready（函数（$）{$（'a[href^=“#”]'）.bind（'click.s平滑滚动'，函数（e）{e.预防违约（）；var目标=this.hash，$target=$（目标）；$（'html，body'）.stop（）.animate（{“scrollTop”：$target.offset（）.top-40}，900，'摆动'，函数（）{window.location.hash=目标；} );} );} );<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul role=“tablist”><li class=“active”id=“p1”><a href=“#pane1”role=“tab”>第1节</a></li><li id=“p2”><a href=“#pane2”role=“tab”>第2节</a></li><li id=“p3”><a href=“#pane3”role=“tab”>第3节</a></li></ul><div id=“pane1”></div><div id=“pane2”></div><div id=“pane3”></div>

在找到了让我的代码工作的方法之后，我想我应该把事情弄清楚一点：用于：

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

您需要在页面顶部，因为$（“#div1”）.offset（）.top将为您滚动到的不同位置返回不同的数字。如果您已经滚动到顶部，则需要指定确切的pageY值（请参阅此处的pageY定义：https://javascript.info/coordinates).

现在，问题是计算一个元素的pageY值。下面是滚动容器为主体的示例：

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

即使您滚动到某个位置，上面的函数也会返回相同的数字。现在，要滚动回该元素：

$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");

在大多数情况下，最好使用插件。认真地我要在这里兜售我的。当然还有其他的。但请检查他们是否真的避免了那些你首先想要插件的陷阱——并不是所有人都这样做。

我写过在其他地方使用插件的原因。简而言之，这里大多数答案的基础是一行

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

是糟糕的用户体验。

动画不会响应用户操作。即使用户单击、轻击或尝试滚动，它也会继续。如果动画的起点接近目标元素，则动画会非常缓慢。如果目标元素位于页面底部附近，则无法滚动到窗口顶部。然后，滚动动画在中间运动时突然停止。

为了处理这些问题（以及其他一些问题），您可以使用我的插件jQuery.scrollable

$( window ).scrollTo( targetPosition );

就这样。当然，还有更多的选择。

关于目标位置，在大多数情况下，$target.offset（）.top完成任务。但是请注意，返回的值没有考虑html元素上的边框（请参见本演示）。如果你需要目标位置在任何情况下都准确，最好使用

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

即使在html元素上设置了边框，这也能正常工作。

当用户点击带有#subject的输入时，页面应该滚动到页面的最后一个元素并添加一个漂亮的动画。它应该是向下滚动而不是向上滚动。页面的最后一项是带有#submit的提交按钮

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

这将首先向下滚动到#submit，然后将光标恢复到单击的输入，这模拟向下滚动，适用于大多数浏览器。它也不需要jQuery，因为它可以用纯JavaScript编写。

通过链接焦点调用，这种使用焦点函数的方式可以更好地模拟动画吗。我还没有测试过这个理论，但它看起来像这样：

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

这是我使用通用类选择器抽象ID和href的方法

$（函数）{//可在任何地方使用的通用选择器$（“.js滚动到”）.click（函数（e）{//动态获取hrefvar destination=$（this）.attr（'href'）；//阻止href=“#”链接更改URL哈希（可选）e.预防违约（）；//动画滚动到目的地$（'html，body'）.animate({scrollTop:$（destination）.offset（）.top}, 500);});});<!-- 固定导航菜单示例--><ul class=“nav”><li><a href=“#section-1”class=“nav item js scroll to”>项目1</a></li><li><a href=“#section-2”class=“nav item js scroll to”>项目2</a></li><li><a href=“#section-3”class=“nav item js scroll to”>项目3</a></li></ul>