Question

Help! I’m trying to build a webpage using the excellent Tiny Scrollbar from http://www.baijs.nl. However, i need to add some internal anchor links to jump down to the appropriate section of the content but this is proving to be a problem. (All the content, including the internal anchor links, are housed within the Tiny Scrollbar div containers).

See my basic mockup on http://jsfiddle.net/uy4hK/

My problem is that although the internal link is jumping down to the correct section, the scrollbar on the right is not updating to the correct position – it just stays at the top. There is an update method that can be used, and the demo also has a version of internal scrolling but using a number variable (200px) but i am unable to tweak this to make it work in my jsfiddle demo. I can’t really use a number because content can vary and the internal links are within the content inside the Tiny Scrollbar container.

Can anyone help?

Answer 1

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

I think you can pull this off with use of jQuery’s position() method. Try this:

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