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

【问题标题】：How to auto scroll to target div with jquery?如何使用 jquery 自动滚动到目标 div？
【发布时间】：2012-02-05 02:26:13
【问题描述】：

如果我有这样的结构：

<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>

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

我想让 jquery 可以滚动到它找到的项目，这样它就可以看到，而用户不必向下滚动到 item5；。

【问题讨论】：

仅供参考，您的标记中有松散的</h3>

标签： jquery html

【解决方案1】：

看到这个小提琴：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;
}

更多动作和变量 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');
    });
});

【讨论】：

刚刚更新了我的答案..滚动太多..应该减去上面两个div的高度（例如本例为200）
现在，你的代码变得有点复杂了，也许没有必要重新发明轮子，并且使用插件（ScrollTo 为 2.5k）;) 一个著名的插件得到了很多人的认可，用所有浏览器等测试。
我经常使用 scrollTo 插件。但如果一组静态元素需要这样做，我的第一个版本可能会更轻量级。如果这需要是动态的，我可能还会使用 scrollTo 插件。甚至我的第二个版本（部分是动态的）也轻了很多。这对我有用很多次。
我遇到了问题，因为 .anitems 是在用户单击按钮后动态生成的。
@Teiviere。动态创建是什么意思？如果可能的话，提供一个小提琴。动态创建还是动态高度？两个都？如果元素是动态创建的，则该函数应在元素完全加载后运行。元素是如何创建的..（最好的解决方案是添加一个小提琴来显示它）

【解决方案2】：

你可以使用像ScrollTo这样的插件

并在页面加载时使用选择器调用$.scrollTo：

$(document).ready(function() {
    $.scrollTo( $('#listofstuff .aniItem:eq(4)'), 500); // index start with 0
});

【讨论】：