内部锚链接使用 Tiny Scrollbar 插件破坏滚动条

Question

帮助！我正在尝试使用来自 www.baijs.nl 的优秀 Tiny Scrollbar 构建一个网页。但是，我需要添加一些内部锚链接以跳转到内容的适当部分，但这被证明是一个问题。 （所有内容，包括内部锚链接，都位于 Tiny Scrollbar div 容器内）。

请参阅我的基本模型 http://jsfiddle.net/uy4hK/

我的问题是，虽然内部链接是跳到正确的部分，右侧的滚动条没有更新到正确的位置 - 它只是停留在顶部。有一个可以使用的更新方法，并且该演示还有一个内部滚动版本，但使用数字变量（200px），但我无法调整它以使其在我的 jsfiddle 演示中工作。我实际上不能使用数字，因为内容可能会有所不同，并且内部链接位于微型滚动条容器内的内容内。

有人可以帮忙吗？

Answer 1

jsFiddle： http://jsfiddle.net/fausak/uy4hK/2/< /a>

我认为你可以使用 jQuery 的 position() 方法。试试这个：

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

Answer 2

谢谢弗萨克。

实际上，在这种情况下，我们希望将锚链接设置为滚动条外部。我们可以例如：

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

Answer 3

我不确定您所要求的问题是否可以通过 Tiny Scrollbar 插件实现。不过，以下内容将使您非常接近：

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

如果您的内容是静态的，您可以将 'bottom' 替换为实际像素长度，例如 '25px'。