javascript - 滚动到 jQuery 中分区内的 id

Question

我有一个选择对象:

<select class="groups" id="groups">
    <option value="index_birmingham">Birmingham</option>
    ...
    <option value="index_wyboston">Wyboston</option>
</select>

我有一个包含多个 header 对象的分区，每个 header 对象都有一个与选择中的值相对应的 id:

<div id="previewer">
    <h3 id="index_birmingham">Birmingham</h3>
    ...
    <h3 id="index_wyboston">Wyboston</h3>
</div>

我正在使用以下 jQuery:

$(document).ready(
    $(".groups").change(function() {
        var value = $(this).find("option:selected").attr("value");
        scrollToDivision(value);
    })
);
function scrollToDivision (value) {
    $("#previewer").animate({ scrollTop: $('#' + value).position().top }, 'slow');
}

然而，虽然这对于选择中的第一个选择来说效果很好，但对于之后的每个选择来说它都失败了；它以明显的随机性上下跳跃。

我猜测有某种位置指针需要清除，以便 jQuery 知道下一步跳到哪里，但经过几天的搜索，我找不到任何东西。

我已经尝试过 ScrollTo by Ariel Flesler ，但它似乎不支持选择对象。

Here is an example of the weirdness我正在经历。

Answer 1

"while this functions perfectly"

或者，如果您实际上将函数传递给 .ready() - 您当前传递的是 $('.groups').change() 的返回值(此时可能是一个空的 jQuery 对象)到 .ready()。但假设这只是一个复制/粘贴错误......

.position() 方法返回“元素相对于偏移父元素的当前位置”。在您做出选择并滚动包含的 div 后，h3 元素的当前位置将发生变化，例如，如果您滚动到底部元素，顶部元素可能会具有负垂直位置，因为它们已经消失了顶端。您可以借助 console.log() 语句准确查看 $('#' + value).position().top 返回的值，如 here 所示。

您需要考虑当前的滚动位置。或者只记下所有标题的初始位置:

var positions = {};
$(document).ready(function() {
    var offset = $("#previewer").position().top;
    $("#previewer h3").each(function() {
        positions[this.id] = $(this).position().top - offset;
    });
    $(".groups").change(function() {
        var value = $(this).val();
        scrollToDivision(value);
    })
});
function scrollToDivision (value) {
    $("#previewer").animate({ scrollTop: positions[value] }, 'slow');
}

演示(仅在 Chrome 中测试):http://jsfiddle.net/Q4pKC/1/

您没有显示 CSS 或明确说明，但我假设您的预览器 div 具有 overflow:scroll？

更新: 与上面相同的 JS，但使用 OP 的标记和 CSS:http://jsfiddle.net/B3JXA/2/