Question

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

在http://jsfiddle.net/uy4hK/

上查看我的基本模型

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

有人可以帮忙吗？

Answer 1

jsFiddle： http://jsfiddle.net/fausak/uy4hK/2/

我认为你可以使用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

谢谢rfausak。

实际上在情况下，我们想从滚动条进行外部链接。我们可以举例如：

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

内部锚链接使用Tiny Scrollbar插件中断滚动条

3 个答案: