使用jquery在div内滚动答案

【问题标题】：scroll within div using jquery使用jquery在div内滚动
【发布时间】：2020-09-27 09:50:42
【问题描述】：

我有一个<div> 和overflow:auto。这个<div> 包含一个带有搜索栏的<form>。我正在以相同的形式显示提取的记录，现在我只需将<div>（我的搜索结果开始显示的位置）滚动到其容器顶部<div>（而不是页面顶部） .

检查创建的 jsfiddle。 http://jsfiddle.net/tusharjs/wGUE2/15/

在这里，我尝试了在 stackoverflow 上找到的解决方案，但它会将所需的 <div id="scrollto"> 滚动到页面顶部，而不是 <div id="maincontent"> 的顶部。

谢谢

【问题讨论】：

检查小提琴，当你检查元素 <div id="scrollto"> 你会发现，它被滚动到顶部。我希望它的顶部从<div id="maincontent"> 开始。清除吗？
很抱歉我听不懂。

标签： jquery css

【解决方案1】：

您应该使用.offset() 方法来获取元素的实际顶部并从滚动量中减去它。

$(document).ready( function(){
  var elem = $('#scrollto');
  if(elem)
  {
    var main = $("#maincontent"),
        t = main.offset().top;
        main.scrollTop(elem.offset().top - t);
  }
});

Here's my fork of your fiddle

为滚动制作动画可能更令人印象深刻：

main.animate({scrollTop: elem.offset().top - t}, 500);

上面的第二个参数是以毫秒为单位的持续时间。更新后的例子是here。

【讨论】：

Austin Mullins - 你上面的 .animate() 调用使用 elem.offset().top 但在你的 jsfiddle 示例中 .animate() 调用使用 elem.position.top()
@paparush 感谢您指出这一点。我更新了小提琴以匹配答案。在使用它时，看起来 position() 和 offset() 恰好返回相同的值，因为页面上没有其他内容。