blocks|key|3058849|text|$innerListItem.position().top实际上是相对于其第一个定位祖先的.scrollTop()而言的。因此，计算正确的$parentDiv.scrollTop()值的方法是从确保$parentDiv的位置开始。如果它还没有显式的position，可以使用position:+relative。元素$innerListItem及其在$parentDiv之前的所有祖先不需要具有显式位置。现在，您可以使用以下命令滚动到$innerListItem：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3058850|//+Scroll+to+the+top
$parentDiv.scrollTop($parentDiv.scrollTop()+%2B+$innerListItem.position().top);

//+Scroll+to+the+center
$parentDiv.scrollTop($parentDiv.scrollTop()+%2B+$innerListItem.position().top
++++-+$parentDiv.height()/2+%2B+$innerListItem.height()/2);|code-block|syntax|javascript|3058851|entityMap^0|0|T|19|C|1X|M|2R|A|3G|8|3T|I|4E|E|4V|A|61|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|L|$]]

<p>The <code>$innerListItem.position().top</code> is actually relative to the <code>.scrollTop()</code> of its first positioned ancestor. So the way to calculate the correct <code>$parentDiv.scrollTop()</code> value is to begin by making sure that <code>$parentDiv</code> is positioned. If it doesn't already have an explicit <code>position</code>, use <code>position: relative</code>. The elements <code>$innerListItem</code> and all its ancestors up to <code>$parentDiv</code> need to have no explicit position. Now you can scroll to the <code>$innerListItem</code> with:</p>

<pre><code>// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);
</code></pre>


blocks|key|312728|text|我调整了Glenn+Moss的答案，以考虑到overflow+div可能不在页面顶部的事实。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312729|parentDiv.scrollTop(parentDiv.scrollTop()+%2B+(innerListItem.position().top+-+parentDiv.position().top)+-+(parentDiv.height()/2)+%2B+(innerListItem.height()/2)++)|code-block|syntax|javascript|312730|我在一个带有响应式模板的google地图应用程序上使用了它。当分辨率>+800px时，列表位于地图的左侧。在分辨率<+800的情况下，该列表位于地图下方。|312731|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I've adjusted Glenn Moss' answer to account for the fact that overflow div might not be at the top of the page.</p>

<pre><code>parentDiv.scrollTop(parentDiv.scrollTop() + (innerListItem.position().top - parentDiv.position().top) - (parentDiv.height()/2) + (innerListItem.height()/2)  )
</code></pre>

<p>I was using this on a google maps application with a responsive template.  On resolution > 800px, the list was on the left side of the map.  On resolution &lt; 800 the list was below the map.</p>


blocks|key|314909|text|这是我自己的插件(会把元素放在列表的顶部。专门为overflow-y+:+auto设计的。可能不适用于overflow-x!)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|314910|HTML：elem是页面将滚动到的元素的选择器。jQuery支持的任何东西，比如：#myid、div.myclass、$(jquery+object)、dom对象等。|BOLD|314911|jQuery.fn.scrollTo+=+function(elem,+speed)+{+
++++$(this).animate({
++++++++scrollTop:++$(this).scrollTop()+-+$(this).offset().top+%2B+$(elem).offset().top+
++++},+speed+==+undefined+?+1000+:+speed);+
++++return+this;+
};|code-block|syntax|javascript|314912|如果不需要设置动画，请使用：|314913|jQuery.fn.scrollTo+=+function(elem)+{+
++++$(this).scrollTop($(this).scrollTop()+-+$(this).offset().top+%2B+$(elem).offset().top);+
++++return+this;+
};|314914|使用方法：|314915|$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem",+2000);+//custom+animation+speed+|314916|注意：#innerItem可以在#overflow_div中的任何位置。它不一定非得是一个直接的子级。|314917|在Firefox+(23)和Chrome+(28)中测试。|314918|如果您想滚动整个页面，请选中this+question。|314919|entityMap|0|LINK|mutability|MUTABLE|url|/questions/6677035/jquery-scroll-to-element^0|O|H|1F|A|0|5|4|15|5|1B|B|1N|G|K|1R|0|0|0|E|0|0|0|5|0|0|0|1F|3|A|G|D|0|0|T|0|0|S|E|D|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1P|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1Q|8|@$9|1R|A|1S|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1T|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1U|8|@$9|1V|A|1W|B|H]]|D|@]|E|$]]|$1|T|3|U|5|K|7|1X|8|@]|D|@]|E|$L|M]]|$1|V|3|W|5|6|7|1Y|8|@$9|1Z|A|20|B|H]|$9|21|A|22|B|C]|$9|23|A|24|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|25|8|@$9|26|A|27|B|H]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|28|8|@$9|29|A|2A|B|H]]|D|@$9|2B|A|2C|1|2D]]|E|$]]|$1|11|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]]]

<p>This is my own plugin (will position the element in top of the the list. Specially for <code>overflow-y : auto</code>. May not work with <code>overflow-x</code>!):</p>

<p><strong>NOTE</strong>: <code>elem</code> is the HTML selector of an element which the page will be scrolled to. Anything supported by jQuery, like: <code>#myid</code>, <code>div.myclass</code>, <code>$(jquery object)</code>, [dom object], etc.</p>

<pre><code>jQuery.fn.scrollTo = function(elem, speed) { 
    $(this).animate({
        scrollTop:  $(this).scrollTop() - $(this).offset().top + $(elem).offset().top 
    }, speed == undefined ? 1000 : speed); 
    return this; 
};
</code></pre>

<p>If you don't need it to be animated, then use:</p>

<pre><code>jQuery.fn.scrollTo = function(elem) { 
    $(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top); 
    return this; 
};
</code></pre>

<p>How to use:</p>

<pre><code>$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem", 2000); //custom animation speed 
</code></pre>

<p>Note: <code>#innerItem</code> can be anywhere inside <code>#overflow_div</code>. It doesn't really have to be a direct child.</p>

<p>Tested in Firefox (23) and Chrome (28).</p>

<p>If you want to scroll the whole page, check <a href="/questions/6677035/jquery-scroll-to-element">this question</a>.</p>


blocks|key|3272165|text|在玩了很长一段时间后，我想出了这个想法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3272166|++++jQuery.fn.scrollTo+=+function+(elem)+{
++++++++var+b+=+$(elem);
++++++++this.scrollTop(b.position().top+%2B+b.height()+-+this.height());
++++};|code-block|syntax|javascript|3272167|我这样叫它|3272168|$("#basketListGridHolder").scrollTo('tr[data-uid="'+%2B+basketID+%2B+'"]');|3272169|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>After playing with it for a very long time, this is what I came up with:</p>

<pre><code>    jQuery.fn.scrollTo = function (elem) {
        var b = $(elem);
        this.scrollTop(b.position().top + b.height() - this.height());
    };
</code></pre>

<p>and I call it like this</p>

<pre><code>$("#basketListGridHolder").scrollTo('tr[data-uid="' + basketID + '"]');
</code></pre>


blocks|key|3058932|text|上面的答案会将内部元素定位在溢出元素的顶部，即使它在溢出元素的视图中。我不想这样，所以我修改了它，如果元素在视图中，就不会改变滚动位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3058933|jQuery.fn.scrollTo+=+function(elem,+speed)+{
++++var+$this+=+jQuery(this);
++++var+$this_top+=+$this.offset().top;
++++var+$this_bottom+=+$this_top+%2B+$this.height();
++++var+$elem+=+jQuery(elem);
++++var+$elem_top+=+$elem.offset().top;
++++var+$elem_bottom+=+$elem_top+%2B+$elem.height();

++++if+($elem_top+>+$this_top+&&+$elem_bottom+<+$this_bottom)+{
++++++++//+in+view+so+don't+do+anything
++++++++return;
++++}
++++var+new_scroll_top;
++++if+($elem_top+<+$this_top)+{
++++++++new_scroll_top+=+{scrollTop:+$this.scrollTop()+-+$this_top+%2B+$elem_top};
++++}+else+{
++++++++new_scroll_top+=+{scrollTop:+$elem_bottom+-+$this_bottom+%2B+$this.scrollTop()};
++++}
++++$this.animate(new_scroll_top,+speed+===+undefined+?+100+:+speed);
++++return+this;
};|code-block|syntax|javascript|3058934|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The above answers will position the inner element at the top of the overflow element even if it's in view inside the overflow element. I didn't want that so I modified it to not change the scroll position if the element is in view.</p>

<pre><code>jQuery.fn.scrollTo = function(elem, speed) {
    var $this = jQuery(this);
    var $this_top = $this.offset().top;
    var $this_bottom = $this_top + $this.height();
    var $elem = jQuery(elem);
    var $elem_top = $elem.offset().top;
    var $elem_bottom = $elem_top + $elem.height();

    if ($elem_top &gt; $this_top &amp;&amp; $elem_bottom &lt; $this_bottom) {
        // in view so don't do anything
        return;
    }
    var new_scroll_top;
    if ($elem_top &lt; $this_top) {
        new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top};
    } else {
        new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()};
    }
    $this.animate(new_scroll_top, speed === undefined ? 100 : speed);
    return this;
};
</code></pre>


blocks|key|3058940|text|我写这两个函数是为了让我的生活更轻松：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3058941|function+scrollToTop(elem,+parent,+speed)+{
++++var+scrollOffset+=+parent.scrollTop()+%2B+elem.offset().top;
++++parent.animate({scrollTop:scrollOffset},+speed);
++++//+parent.scrollTop(scrollOffset,+speed);
}

function+scrollToCenter(elem,+parent,+speed)+{
++++var+elOffset+=+elem.offset().top;
++++var+elHeight+=+elem.height();
++++var+parentViewTop+=+parent.offset().top;
++++var+parentHeight+=+parent.innerHeight();
++++var+offset;

++++if+(elHeight+>=+parentHeight)+{
++++++++offset+=+elOffset;
++++}+else+{
++++++++margin+=+(parentHeight+-+elHeight)/2;
++++++++offset+=+elOffset+-+margin;
++++}

++++var+scrollOffset+=+parent.scrollTop()+%2B+offset+-+parentViewTop;

++++parent.animate({scrollTop:scrollOffset},+speed);
++++//+parent.scrollTop(scrollOffset,+speed);
}|code-block|syntax|javascript|3058942|并使用它们：|3058943|scrollToTop($innerListItem,+$parentDiv,+200);
//+or
scrollToCenter($innerListItem,+$parentDiv,+200);|3058944|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I write these 2 functions to make my life easier:</p>

<pre><code>function scrollToTop(elem, parent, speed) {
    var scrollOffset = parent.scrollTop() + elem.offset().top;
    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}

function scrollToCenter(elem, parent, speed) {
    var elOffset = elem.offset().top;
    var elHeight = elem.height();
    var parentViewTop = parent.offset().top;
    var parentHeight = parent.innerHeight();
    var offset;

    if (elHeight &gt;= parentHeight) {
        offset = elOffset;
    } else {
        margin = (parentHeight - elHeight)/2;
        offset = elOffset - margin;
    }

    var scrollOffset = parent.scrollTop() + offset - parentViewTop;

    parent.animate({scrollTop:scrollOffset}, speed);
    // parent.scrollTop(scrollOffset, speed);
}
</code></pre>

<p>And use them:</p>

<pre><code>scrollToTop($innerListItem, $parentDiv, 200);
// or
scrollToCenter($innerListItem, $parentDiv, 200);
</code></pre>


blocks|key|315865|text|接受的答案只适用于可滚动元素的直接子元素，而其他答案不会将子元素放在可滚动元素的中心。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315866|示例HTML：|315867|<div+class="scrollable-box">
++++<div+class="row">
++++++++<div+class="scrollable-item">
++++++++++++Child+1
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+2
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+3
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+4
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+5
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+6
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+7
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+8
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+9
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+10
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+11
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+12
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+13
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+14
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+15
++++++++</div>
++++++++<div+class="scrollable-item">
++++++++++++Child+16
++++++++</div>
++++</div>
</div>

<style>
.scrollable-box+{
++++width:+800px;
++++height:+150px;
++++overflow-x:+hidden;
++++overflow-y:+scroll;
++++border:+1px+solid+#444;
}
.scrollable-item+{
++++font-size:+20px;
++++padding:+10px;
++++text-align:+center;
}
</style>|code-block|syntax|javascript|315868|构建一个小的jQuery插件：|315869|$.fn.scrollDivToElement+=+function(childSel)+{
++++if+(!+this.length)+return+this;

++++return+this.each(function()+{
++++++++let+parentEl+=+$(this);
++++++++let+childEl+=+parentEl.find(childSel);

++++++++if+(childEl.length+>+0)+{
++++++++++++parentEl.scrollTop(
++++++++++++++++parentEl.scrollTop()+-+parentEl.offset().top+%2B+childEl.offset().top+-+(parentEl.outerHeight()+/+2)+%2B+(childEl.outerHeight()+/+2)
++++++++++++);
++++++++}
++++});
};|315870|用法：|315871|$('.scrollable-box').scrollDivToElement('.scrollable-item:eq(12)');|315872|说明：|offset|length|style|BOLD|315873|315874|parentEl.scrollTop(...)设置滚动条的当前垂直位置。|ordered-list-item|CODE|315875|315876|315877|parentEl.scrollTop()获取滚动条的当前垂直位置。|315878|315879|315880|parentEl.offset().top获取parentEl相对于文档的当前坐标。|315881|315882|315883|childEl.offset().top获取childEl相对于文档的当前坐标。|315884|315885|315886|parentEl.outerHeight()+/+2得到的是子元素的外部高度的一半(因为我们希望它居中)。|315887|315888|使用|315889|时：|315890|315891|$(parent).scrollDivToElement(child);|315892|DOM父是可滚动的，它可以是字符串，也可以是DOM元素的jQuery对象。|315893|DOM子级是您想要滚动到的任何子级，它可以是字符串，也可以是元素的jQuery对象。|315894|Codepen+demo|315895|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/binarweb/pen/xxVEoVb^0|0|0|0|0|0|0|0|0|3|0|0|0|N|0|0|0|0|K|0|0|0|0|L|N|8|0|0|0|0|K|M|7|0|0|0|0|Q|0|0|0|0|0|0|10|0|9|S|0|0|5|U|C|0|0|C|0|C|0|0^^$0|@$1|2|3|4|5|6|7|23|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|24|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|25|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|26|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|27|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|28|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|29|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|2A|8|@$S|2B|T|2C|U|V]]|9|@]|A|$]]|$1|W|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|2E|8|@$S|2F|T|2G|U|10]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|13|3|14|5|Z|7|2J|8|@$S|2K|T|2L|U|10]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]|$1|17|3|18|5|Z|7|2O|8|@$S|2P|T|2Q|U|10]|$S|2R|T|2S|U|V]]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2T|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|Z|7|2V|8|@$S|2W|T|2X|U|10]|$S|2Y|T|2Z|U|V]]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|30|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|31|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|Z|7|32|8|@$S|33|T|34|U|10]]|9|@]|A|$]]|$1|1H|3|-4|5|6|7|35|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|36|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|Z|7|37|8|@]|9|@]|A|$]]|$1|1M|3|-4|5|6|7|38|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|39|8|@$S|3A|T|3B|U|10]]|9|@]|A|$]]|$1|1P|3|1Q|5|6|7|3C|8|@$S|3D|T|3E|U|V]]|9|@]|A|$]]|$1|1R|3|1S|5|6|7|3F|8|@$S|3G|T|3H|U|V]|$S|3I|T|3J|U|V]]|9|@]|A|$]]|$1|1T|3|1U|5|6|7|3K|8|@$S|3L|T|3M|U|V]]|9|@$S|3N|T|3O|1|3P]]|A|$]]|$1|1V|3|-4|5|6|7|3Q|8|@]|9|@]|A|$]]]|1W|$1X|$5|1Y|1Z|20|A|$21|22]]]]

<p>The accepted answer only works with direct children of the scrollable element, while the other answers didn't centered the child in the scrollable element.</p>
<p>Example HTML:</p>
<pre><code>&lt;div class=&quot;scrollable-box&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 1
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 2
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 3
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 4
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 5
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 6
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 7
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 8
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 9
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 10
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 11
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 12
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 13
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 14
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 15
        &lt;/div&gt;
        &lt;div class=&quot;scrollable-item&quot;&gt;
            Child 16
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
.scrollable-box {
    width: 800px;
    height: 150px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #444;
}
.scrollable-item {
    font-size: 20px;
    padding: 10px;
    text-align: center;
}
&lt;/style&gt;
</code></pre>
<p>Build a small jQuery plugin:</p>
<pre><code>$.fn.scrollDivToElement = function(childSel) {
    if (! this.length) return this;

    return this.each(function() {
        let parentEl = $(this);
        let childEl = parentEl.find(childSel);

        if (childEl.length &gt; 0) {
            parentEl.scrollTop(
                parentEl.scrollTop() - parentEl.offset().top + childEl.offset().top - (parentEl.outerHeight() / 2) + (childEl.outerHeight() / 2)
            );
        }
    });
};
</code></pre>
<p>Usage:</p>
<pre><code>$('.scrollable-box').scrollDivToElement('.scrollable-item:eq(12)');
</code></pre>
<p><strong>Explanation:</strong></p>
<ol>
<li><p><code>parentEl.scrollTop(...)</code> sets current vertical position of the scroll bar.</p>
</li>
<li><p><code>parentEl.scrollTop()</code> gets the current vertical position of the scroll bar.</p>
</li>
<li><p><code>parentEl.offset().top</code> gets the current coordinates of the <strong>parentEl</strong> relative to the document.</p>
</li>
<li><p><code>childEl.offset().top</code> gets the current coordinates of the <strong>childEl</strong> relative to the document.</p>
</li>
<li><p><code>parentEl.outerHeight() / 2</code> gets the outer height divided in half (because we want it centered) of the child element.</p>
</li>
<li><p>when used:</p>
</li>
</ol>
<p><code>$(parent).scrollDivToElement(child);</code></p>
<p>The <strong>parent</strong> is the scrollable div and it can be a string or a jQuery object of the DOM element.<br />
The <strong>child</strong> is any child that you want to scroll to and it can be a string or a jQuery object of the DOM element.</p>
<p><a href="https://codepen.io/binarweb/pen/xxVEoVb" rel="nofollow noreferrer">Codepen demo</a></p>


<p>I have 20 list items inside of a div that can only show 5 at a time. What is a good way to scroll to item #10, and then item #20? I know the height of all the items.</p>

<p>The <code>scrollTo</code> plugin does this, but its source is not super easy to understand without really getting into it. <strong>I don't want to use this plugin.</strong></p>

<p>Let's say I have a function that takes 2 elements <code>$parentDiv</code>, <code>$innerListItem</code>, neither <code>$innerListItem.offset().top</code> nor <code>$innerListItem.positon().top</code> gives me the correct scrollTop for $parentDiv.</p>


How do I scroll to an element within an overflowed Div?

jQuery

我在一个div中有20个列表项，一次只能显示5个。滚动到项目#10，然后滚动到项目#20的好方法是什么？我知道所有物品的高度。scrollTo插件可以做到这一点，但如果不真正深入其中，其源代码并不容易理解。我不想使用这个插件。假设我有一个函数，它有两个元素$parentDiv，$innerListItem，$inner...

问如何滚动到溢出的Div中的元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何滚动到溢出的Div中的元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何滚动到溢出的Div中的元素？
EN