jquery - 将父元素滚动到子元素的顶部

Question

我正在尝试滚动一个 div，以便它内部的链接出现在顶部。

$(document).ready(function(){

    scrollit();
  
  
});

function scrollit(){
  
  	var elem= $("#link10");
							  
	if(elem.length){
		console.log(elem.offset().top);
		$("#sidebar").animate({ scrollTop: elem.offset().top }, { duration: 'medium', easing: 'swing' });
	}
  
  
}

#sidebar{
  
  height:80px;
  width:200px;
  overflow:scroll;
  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='sidebar'>
         <a href='#' id='link1'>1</a><br/>
         <a href='#' id='link2'>2</a><br/>
         <a href='#' id='link3'>3</a><br/>
         <a href='#' id='link4'>4</a><br/>
         <a href='#' id='link5'>5</a><br/>
         <a href='#' id='link6'>6</a><br/>
         <a href='#' id='link7'>7</a><br/>
         <a href='#' id='link8'>8</a><br/>
         <a href='#' id='link9'>9</a><br/>
         <a href='#' id='link10'>10</a><br/>
         <a href='#' id='link11'>11</a><br/>
         <a href='#' id='link12'>12</a><br/>
         <a href='#' id='link13'>13</a><br/>
         <a href='#' id='link14'>14</a><br/>
         <a href='#' id='link15'>15</a><br/>
         <a href='#' id='link16'>16</a><br/>
         <a href='#' id='link17'>17</a><br/>
         <a href='#' id='link18'>18</a>
    </div>

<br/><br/>
<a href='#' onclick='scrollit();return false'>again</a>

首先，它会将偏移量记录为某个距离(比如 45)，然后正确滚动到那里。然后，如果它再次运行，记录的距离为 0，然后将滚动到侧边栏的顶部。它应该在那个元素上说。

Answer 1

如您在 this jsbin 中所见，您的代码工作正常

问题是 elem.offset().top 值是相对于当前滚动位置的，因此您必须考虑到这一点并重置滚动或打折滚动位置(使用类似于 window.pageYOffset)。

更新:

danielb 的解决方案:

$("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration: 'medium', easing: 'swing' });