Scrolling parent to top of child
I am trying to scroll a div so that a link appears inside it.
$(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>
source to share
Your code works great as you can see in this jsbin
The problem is that the value elem.offset().top
refers to the current scroll position, so you need to take that in an account and reset the scroll or skip the scroll position (with something like window.pageYOffset
).
UPDATE:
Danielb's solution:
$("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration: 'medium', easing: 'swing' });
source to share
You can prevent the animation from reactivating after the element is on top by using an additional condition like this:
$(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>
source to share
what you can do is find the top offset of the parents and subtract it with the top level offset which will always give you the distance between them.
var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
top: childPos.top - parentPos.top,
left: childPos.left - parentPos.left
}
but make sure the parent div has relative or absolute position (css) ..
source to share