Javascript 在jQuery中滚动到分区内的id

我有一个选择对象：

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

然而，虽然该功能在选择的第一个选择中运行良好，但在之后的每个选择中都会失败；它以明显的随机性上下跳跃

我猜有某种位置指针需要清除，以便jQuery知道下一个跳转到哪里，但经过几天的搜索，我什么也找不到

我尝试了，但它似乎不支持选择对象

---

我正在经历。

您的解决方案中唯一的问题是

$("#previewer").animate({ scrollTop: $('#' + value).position().top }, 'slow');

你正在尝试动画预览，你必须动画html，身体休息是好的。 看看这个，以便更好地理解

更新： 因为您只需要滚动priewer div，所以您必须使用overflow:auto为其提供一些固定高度。

---

更新的小提琴

我试过这个，效果很好：

$(document).ready(function() {
    var $previewer = $('#previewer'),
        previewerOffsetTop = $previewer.offset().top;

    $('#groups').change(scrollToDivision);

    function scrollToDivision() {
        // this (groups select) .value gets the value of the option selected
        var $division = $('#'+this.value),
            top = $division.offset().top - previewerOffsetTop;

        $previewer.animate( { scrollTop: top }, 'slow' );
    }
});

编辑：我制作了一个JSFIDLE：

希望这有帮助

虽然这个功能很好

或者，如果您实际将一个函数传递给.ready—您当前传递了来自$'.groups'的返回值。此时可能会将空jQuery对象更改为.ready。但假设这只是一个复制/粘贴错误

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

您需要考虑当前的滚动位置。或者只需注意所有标题的初始位置：

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中测试的演示：

您没有显示CSS或明确地说，但我假设您的previewer div有溢出：scroll

更新：与上面的JS相同，但是有了OP的标记和CSS:

我认为Jquery是不需要的，它可以通过使用锚标记简单地实现

---

我想这可能会有帮助

另外，$this.val或this.value将为您提供选择元素中所选项目的值，您不需要$this.findoption:selected.attrvalue。在特定浏览器上是否存在此问题？这似乎有效：@KevinBowersox-这似乎有效，因为它只包含两个选项，所以它只能滚动到顶部或底部。同样，它会找到第一个id，但之后会随机跳转，只是偶尔碰到标题的位置。尝试一下，你会看到发生了什么。正如我在前面的消息中所说，$html，body正在滚动整个文档，而不是分区。@WayneSmallman我已更新帖子，只滚动分区。你的小提琴在我的浏览器里也很好用。你在用哪个浏览器？我在用Chrome。然而，@nnnnnn最接近于工作的东西。但是a不会产生动画，b你不应该在选项元素中放置锚。当所讨论的元素在一个有溢出的div中时，c会起作用吗：scroll？@nnnn好的，伙计，为什么我不在选项中加锚，你能澄清一下吗？我在应用程序的其他地方有类似的东西，它确实起作用，但它有点笨重，最终可能会被ScrollTo取代。好吧，这表明选项元素应该只包含文本-这说明够了吗？实际上，我不能说所有浏览器都会像你所展示的那样使用标记，但我想你会发现Chrome、FF和IE都会忽略你的锚定标记，只保留文本内容。。。请随时提供演示来证明我错了；溢出y：滚动。到目前为止，这是最接近的东西，功能一致，虽然定位是由约3厘米的每一次；也许这是一个填充/空白的东西？我怀疑这是一个填充/空白的东西，你可以调整。正如我在回答中指出的那样，我只在Chrome上测试了它，但对我来说，标题与previewer div的顶部完全一致，测试时使用了我在提供演示之前猜到的标记/css和演示中的标记/css。编辑：我刚刚尝试了FF，效果也不错。我也在使用Chrome，不过我会在以后扩展到不同的浏览器，到目前为止，它已经被250px的位置[this.id]=$this.position.top-offset-250；即使是在我答案最后一行的演示上？不，这是这里，在这里。你的例子很贴切，所以我这里显然有问题。谢天谢地，每次选择都以250px的速度进行，这意味着如果浏览器之间有任何变化，我只需要切换一个数字。

$(document).ready(function() {
    var $previewer = $('#previewer'),
        previewerOffsetTop = $previewer.offset().top;

    $('#groups').change(scrollToDivision);

    function scrollToDivision() {
        // this (groups select) .value gets the value of the option selected
        var $division = $('#'+this.value),
            top = $division.offset().top - previewerOffsetTop;

        $previewer.animate( { scrollTop: top }, 'slow' );
    }
});

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');
}

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