Jquery 内部锚点链接使用微型滚动条插件中断滚动条

救命啊！我正在尝试使用www.baijs.nl提供的优秀工具构建一个网页。然而，我需要添加一些内部锚链接，以跳转到内容的适当部分，但事实证明这是一个问题。所有的内容，包括内部锚定链接，都放在小小的滚动条div容器中

看到我的基本模型了吗

我的问题是，尽管内部链接跳到了正确的部分，但右侧的滚动条并没有更新到正确的位置——它只是停留在顶部。有一个更新方法可以使用，演示也有一个版本的内部滚动，但使用了一个数字变量200px，但我无法调整它使其在我的JSFIDLE演示中工作。我不能真正使用数字，因为内容可能会有所不同，而内部链接位于微型滚动条容器中的内容内

---

有人能帮忙吗？

我不确定你所问的是否可以通过这个小小的滚动条插件实现。不过，以下几点会让您非常接近：

$('a[href^="#"]').click(function() {
    $('#scrollbar1').tinyscrollbar_update('bottom');
});

如果您的内容是静态的，您可以用实际像素长度替换“bottom”，如“25px”。

jsiddle:

我认为使用jQuery的方法可以实现这一点。试试这个：

$('a[href^="#"]').click(function() {
    // Find the bottom of the box with the scrollbar
    // (close approximation: the top position of the last element in the box)
    var bottom = $('.viewport .overview').children().last().position().top;

    // Determine what position this internal link is located at
    // (if you use <a name=".."> you will need to change this,
    // right now it only matches element IDs like <h1 id="link0">
    var cur = $($(this).attr('href')).position().top;

    // If the position of the link is too low for the scrollbar in this box,
    // just set it to the bottom
    if (cur >= bottom - $('.viewport').height()) {
        cur = 'bottom';
    }
    else {
        cur = cur + 'px';
    }

    $('#scrollbar1').tinyscrollbar_update(cur);
});

谢谢你

实际上，在这种情况下，我们想使锚链接从滚动条外部。例如，我们可以：

<div class="overview">
  <h3 id="link0">Magnis dis parturient montes</h3>
    <p>Text in here</p>
  <h3 id="link1">Magnis dis parturient montes</h3>
    <p>Text in here</p>
</div>



<a href="#" rel="link1" class="scroll1load">anchor link1</a>
<a href="#" rel="link0" class="scroll1load">anchor link0</a>

修改rfausak代码：

$('a.scroll1load').click(function(){
            // Find the bottom of the box with the scrollbar
            // (close approximation: the top position of the last element in the box)
            var bottom = $('.viewport .overview').children().last().position().top;

            // Determine what position this internal link is located at
            // (if you use <a name=".."> you will need to change this,
            // right now it only matches element IDs like <h1 id="link0">
            //var cur = $($('#scroll1load').attr('href')).position().top;
            var anchor =  $(this).attr('rel');
            var cur = $('div.overview h3#'+anchor).position().top;
            // If the position of the link is too low for the scrollbar in this box,
            // just set it to the bottom
            if (cur >= bottom - $('.viewport').height()) {
                cur = 'bottom';
            }
            else {
                cur = cur + 'px';
            }



            oScroll.tinyscrollbar_update(cur);
            return false;
        });

---

但是不同的链接可能位于页面的不同位置，因此这不是一个灵活的解决方案。他必须硬编码每个链接的位置。这就是我试图暗示的。嗨，谢谢你的快速回复。有一种感觉，这可能不适合我-内容和内部链接可能会有所不同-但让我试试你的建议。只是想知道还有其他的解决方案或破解方法吗？是的，事实上我想我找到了，我会在一分钟后发布另一个答案。嗨，rfausak，不知道你是怎么做到的，但你的答案似乎很好，所以非常感谢！它跳转到适当的子部分，滚动条也在更新，这很好。谢谢