我正在尝试滚动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>
答案 0 :(得分:5)
您可以在this jsbin
中看到正常的代码问题是elem.offset().top
值是相对于当前滚动位置的,所以你必须考虑到它并重置滚动或折扣滚动位置(类似window.pageYOffset
)。
<强>更新强>
danielb的解决方案:
$("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration: 'medium', easing: 'swing' });
答案 1 :(得分:1)
如果项目位于顶部,您可以使用附加条件阻止动画再次触发,如下所示:
$(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>
答案 2 :(得分:0)
你可以做的是找到父母的顶部偏移并用链接的顶部偏移量减去它,它总是能给你两者之间的距离..
var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
top: childPos.top - parentPos.top,
left: childPos.left - parentPos.left
}
但请确保父div具有相对或绝对位置(css)..
答案 3 :(得分:0)
解决方案:
解决方案:
$("#sidebar").animate({ scrollTop: $("#sidebar").scrollTop()+elem.offset().top }, { duration:'medium', easing: 'swing' });