Menu
I am trying to scroll a div so that a link inside of it appears on top.
$(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>
228
The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.
An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .
To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
An element's scrollTop is a form of distance measurement regarding an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0." Since the content of inner doesn't generate a scrollbar, scrollTop is 0 .
Your code works fine as you can see in this jsbin
The problem is that the elem.offset().top value is relative to the current scroll position so you have to take that in account and either reset the scroll or discount the scroll position (with something like window.pageYOffset).
UPDATE:
Solution by danielb:
$("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration: 'medium', easing: 'swing' });
You can prevent the animation from triggering again once the item is on top using an additional condition as follows:
$(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
