Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Прокрутка DIV

Автор: N0rt0N 19.1.2012, 10:19

Доброго времени суток всем!
Возникла такая проблема.
Есть div некоторой ширины с прокруткой, в котором куча текста.
В диве имеются якоря типа:

Код


<a name="x"></a>
<a name="y"></a>
<a name="z"></a>

Для того чтобы кликнув по ссылке вне div'a типа:

Код


<a href="#x">Прокрутка к X</a>

Прокрутить div до нужного места. Но тут как раз проблема в том, что прокручивается не только div, но и сдвигается вся страница к этому якорю.
Вопрос такой, возможно ли каким либо образом по щелчку на ссылке прокручивать только div до соответствующего якоря, а страницу оставлять на месте (как была)?
Заранее спасибо!

Автор: ksnk 19.1.2012, 12:19

Скроллится только по высоте, по горизонтали не было нужно. Всемирная константа 20 - последствия допиливания идеи по месту напильником

Код


function _scrollIntoView(el){
    var pos = $(el).position(),
        topdisp=$(el).height(); // смещение до верха
    $(el).parents().add(window).each(function(){
        var xx = $(this),xpos;
        if (xx.is(document.body)) return;
        if(this==window)
            xpos={top:0,left:0};
        else {
            if (this.scrollHeight==xx.height()) return;
            xpos=xx.position();
        }
        pos.top-=xpos.top;
        pos.left-=xpos.left;
        if ( pos.top+topdisp>xx.height() ){
            xx.scrollTop(xx.scrollTop() +topdisp + pos.top-xx.height() );
            topdisp=Math.max(xx.height(),topdisp);
        }
        else if ( pos.top <0 )
            xx.scrollTop(xx.scrollTop() + pos.top  );
        pos=xpos;
    })
}

Код


<button onclick="_scrollintoView($('a[name=x'))">scrollInto a name=a</button>

Автор: ksnk 19.1.2012, 17:00

Исправил функцию. Теперь все более правильно работает.

Автор: N0rt0N 20.1.2012, 09:44

Странно, почему-то не работает...
Т.е. по клику прокручивает див из любого положения до верхней точки и все, но не до объекта, хотя объект в ф-ю передается вроде нормально...

Автор: ksnk 20.1.2012, 09:59

N0rt0N, нужен пример разметки. Также, объект, который передается в фукнцию должен обладать нетекстовым стилем display (block|inline-block), иначе некорректно вычисляются для него height и/или position

Автор: N0rt0N 20.1.2012, 10:07

Сейчас у меня примерно так, есть ссылки:

Код


<a onclick="_scrollIntoView($('#a1'))">
<a onclick="_scrollIntoView($('#a2'))">
<a onclick="_scrollIntoView($('#a3'))">

А в диве с прокруткой другие дивы (в качестве объектов для прокрутки):

Код


<div id="a1" style="display:block"></div>
<div id="a2" style="display:block"></div>
<div id="a3" style="display:block"></div>

Однако для них все равно для всех topdisp = 0...

Автор: ksnk 20.1.2012, 10:13

<div id="a1" style="display:block"></div> имеет высоту 0px. Так и должно быть?

Автор: N0rt0N 20.1.2012, 10:19

А, все, огромное спасибо! Принцип понял, действительно, нужно было тексты разделов поместить в div'ы, тогда все работает!
Спасибо еще раз!

Автор: ksnk 20.1.2012, 10:44

Еще немного поправил. Вот архивчик с тестовой страничкой для проверки.

Автор: ksnk 20.1.2012, 10:45

Правленая версия функции - в архиве.

Автор: N0rt0N 20.1.2012, 13:04

Еще раз огромное спасибо!