logo标签列表

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

jqueryhtmlcss
6
我正在尝试滚动一个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>
At first, it will log the offset as being a certain distance (say 45), and will scroll to there correctly. Then, if it runs again, the logged distance is 0 and will then scroll to the top of the sidebar. It should say at that element.

你的问题不太清楚... 你是想要将父元素滚动到子元素的顶部吗？还是想要将子链接滚动到父 div 的顶部或开头？ - Alok
是的，请查看代码片段。 - danielb
4个回答
9

您的代码在这个jsbin页面上可以正常工作。

问题是elem.offset().top的值相对于当前滚动位置，因此您必须考虑到这一点，要么重置滚动条，要么减去滚动位置（例如使用window.pageYOffset）。

更新：

danielb提供的解决方案：

$("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration: 'medium', easing: 'swing' });
请注意答案 - rafaelcastrocouto
你有例子吗？由于偏移量是div元素的，所以pageoffset不起作用。 - danielb
1
这个答案最接近。解决方案： $（“#sidebar”）.animate（{scrollTop：$（“#sidebar”）.scrollTop（）+ elem.offset（）。top}，{duration：'medium'，easing：'swing'}）; - danielb
我的错，丹尼尔...如果页面正在滚动，pageYOffset会对你有所帮助...我很高兴你找到了解决方案。 - rafaelcastrocouto
这对我的情况不起作用。如果您的父级div位于绝对定位的父级内部，则对我而言 $（“#sidebar”）.animate（{scrollTop：$（“#sidebar”）.scrollTop（）+ elem.position（）。top}，{duration：'medium'，easing：'swing'}）; 会起作用。仅使用偏移使其上下跳动。 - godheaper
好奇 - 使用Angular 7动画模块是否可行？我尝试过但没有成功，所以想问问其他人有没有成功过。 - coder101
2
您可以使用以下附加条件防止动画再次触发，一旦项目在顶部：

$(document).ready(scrollit);

function scrollit(){
  
  var elem = $("#link10");
  if(elem.length && elem.position().top){
     $("#sidebar").animate({ scrollTop: elem.position().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>

0
你可以找到父元素的顶部偏移量，然后用链接的顶部偏移量减去它，这样总是可以得到两者之间的距离。
var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

但请确保父级 div 具有相对或绝对定位（CSS）。

这个不起作用。parentPos 始终为 0（div 固定在顶部）。 - danielb
0

解决方案：

解决方案：

  $("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration:'medium', easing: 'swing' });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接