Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Прокрутка DIV, Прокутка div до определенного места 
:(
    Опции темы
N0rt0N
Дата 19.1.2012, 10:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 20.5.2007

Репутация: нет
Всего: нет



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

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

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

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

Прокрутить div до нужного места. Но тут как раз проблема в том, что прокручивается не только div, но и сдвигается вся страница к этому якорю.
Вопрос такой, возможно ли каким либо образом по щелчку на ссылке прокручивать только div до соответствующего якоря, а страницу оставлять на месте (как была)?
Заранее спасибо!
PM MAIL   Вверх
ksnk
Дата 19.1.2012, 12:19 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Скроллится только по высоте, по горизонтали не было нужно. Всемирная константа 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:01


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ksnk
Дата 19.1.2012, 17:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
N0rt0N
Дата 20.1.2012, 09:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 20.5.2007

Репутация: нет
Всего: нет



Странно, почему-то не работает...
Т.е. по клику прокручивает див из любого положения до верхней точки и все, но не до объекта, хотя объект в ф-ю передается вроде нормально...
PM MAIL   Вверх
ksnk
Дата 20.1.2012, 09:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
N0rt0N
Дата 20.1.2012, 10:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 20.5.2007

Репутация: нет
Всего: нет



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

<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...
PM MAIL   Вверх
ksnk
Дата 20.1.2012, 10:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
N0rt0N
Дата 20.1.2012, 10:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 20.5.2007

Репутация: нет
Всего: нет



А, все, огромное спасибо! Принцип понял, действительно, нужно было тексты разделов поместить в div'ы, тогда все работает!
Спасибо еще раз!
PM MAIL   Вверх
ksnk
Дата 20.1.2012, 10:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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

Присоединённый файл ( Кол-во скачиваний: 15 )
Присоединённый файл  scroll.zip 2,13 Kb


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ksnk
Дата 20.1.2012, 10:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



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

Это сообщение отредактировал(а) ksnk - 20.1.2012, 10:45


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
N0rt0N
Дата 20.1.2012, 13:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 17
Регистрация: 20.5.2007

Репутация: нет
Всего: нет



Еще раз огромное спасибо!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.1306 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.