Внутренние ссылки привязывают полосу прокрутки к плагину Tiny Scrollbar - PullRequest
Новая
       8

Внутренние ссылки привязывают полосу прокрутки к плагину Tiny Scrollbar

2 голосов
/ 25 сентября 2011

Помощь! Я пытаюсь создать веб-страницу, используя превосходную Tiny Scrollbar от www.baijs.nl. Тем не менее, мне нужно добавить несколько внутренних ссылок привязки, чтобы перейти к соответствующему разделу контента, но это оказывается проблемой. (Весь контент, включая внутренние якорные ссылки, размещается в контейнерах div Tiny Scrollbar).

Смотрите мой основной макет на http://jsfiddle.net/uy4hK/

Моя проблема в том, что, хотя внутренняя ссылка переходит вниз в правильный раздел, полоса прокрутки справа не обновляется до правильной позиции - она ​​просто остается вверху. Существует метод обновления, который можно использовать, и у демо также есть версия внутренней прокрутки, но с использованием числовой переменной (200px), но я не могу настроить это, чтобы она работала в моей демоверсии jsfiddle. Я действительно не могу использовать число, потому что содержимое может различаться, а внутренние ссылки находятся внутри содержимого внутри контейнера Tiny Scrollbar.

Может кто-нибудь помочь?

Ответы [ 3 ]

4 голосов
/ 25 сентября 2011

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

Я думаю, что вы можете осуществить это с помощью метода position() в 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);
});
1 голос
/ 06 июня 2012

Спасибо, 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;
        });
0 голосов
/ 25 сентября 2011

Я не уверен, что именно то, что вы спрашиваете, возможно с плагином Tiny Scrollbar. Следующее поможет вам довольно близко: 

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

Если ваш контент статический, вы можете заменить 'bottom' фактической длиной пикселя, например '25px'.

...