jquery - 如何使用 jquery 自动滚动到目标 div？

Question

如果我有这样的结构:

<div id="listofstuff">
<div class="anitem">
   <span class="itemname">Item1</span>
   <span class="itemdescruption">AboutItem1</span>
</div>
<div class="anitem">
   <span class="itemname">Item2</span>
   <span class="itemdescruption">AboutItem2</span>
</div>
<div class="anitem">
   <span class="itemname">Item3</span>
   <span class="itemdescruption">AboutItem3</span>
</div>
</div>

假设我继续这种模式，直到第 5 项...并且我想做到这一点，以便在加载页面时，它会搜索项目名称为“Item5”的 div，然后滚动到它以使其可见。假设 listofstuffdiv 的大小很小，因此在任何给定时间只显示 3 个项目，但由于 overflow:auto 存在，用户可以滚动。

我想做到这一点，以便 jquery 可以滚动到它找到的项目，这样它就可以看到，而无需用户向下滚动到 item5;。

Answer 1

请参阅此 fiddle :http://jsfiddle.net/pixelass/uaewc/2/

为此您不需要 scrollTo 插件..

jQuery

$(document).ready(function(){
    lastElementTop = $('#listofstuff .anitem:last-child').position().top ;
    scrollAmount = lastElementTop - 200 ;

$('#listofstuff').animate({scrollTop: scrollAmount},1000);
});

CSS

.anitem {
height:100px;
}

#listofstuff {

height:300px;
    overflow:auto;
}

---

多一点 Action 和变量 http://jsfiddle.net/pixelass/uaewc/5/

---

$(document).ready(function() {
    var wrapper = $('#listofstuff'),
    element = wrapper.find('.anitem'),
    lastElement = wrapper.find('.anitem:last-child'),
    lastElementTop = lastElement.position().top,
    elementsHeight = element.outerHeight(),
    scrollAmount = lastElementTop - 2 * elementsHeight;

    $('#listofstuff').animate({
        scrollTop: scrollAmount
    }, 1000, function() {
        lastElement.addClass('current-last');
    });
});