2

Пытаюсь сделать плавный скролл на якорь при нажатии на ссылку. Но работает не так, как должно.

По этой ссылке пример скролла

Структура сайта такая:

  1. Слева sidebar
  2. Справа зона контента

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

Для этого в родительский блок .container был помещен блок .child.scrollable

.child {
  position: absolute;
  width: 100%;
  height: 100%;
}

.scrollable {
  overflow-y: auto;
}

Вроде все просто и банально, но не могу понять, почему ведет себя так переключение между якорями. При нажатии на первую ссылку страница скроллится на нужное место, но при повторном нажатии страница поднимается в начало. И так на всех ссылках.

Если же убрать дочерний блок .child.scrollable, то все работает как должно.

Ссылка на пример

В чем может быть проблема?

1 ответ 1

3

Происходит это по той причине, что $(scroll_el).offset().top возвращает позицию элемента относительно окна (а не родителя). Первоначально в данной ситуации элемент имеет некую позицию x на странице относительно окна. При первом клике на якорь, .scrollable скроллится на расстояние x, и элемент становится на позицию 0 относительно окна. Следовательно следующий клик по этому же якорю отскроллит .scrollable к позиции 0, т.к. отпступ нужного элемента относительно окна уже равен 0. Получается бесконечный цикл 0 -> x -> 0 -> ....

Решается это тем, что нужно использовать отступ относительно родителя использованием $(scroll_el).position().top, родителем в данном случае выступает контейнер .scrollable. Также необходимо учитывать тот факт, что контейнер .scrollable собственно скроллится, и позиция элементов относительно его вершины меняется при скролле. Чтобы это исправить необходимо к отступу относительно родителя добавлять также текущее значение скролла родителя $('.scrollable').scrollTop(). В итоге выражение по анимации выглядит следующим образом:

$('.scrollable').animate({
    scrollTop: $(scroll_el).position().top + $('.scrollable').scrollTop()
}, 500);

Пример на JSFiddle

1
  • @wkornilow, а вот этот пример работает верно, в отличии от выбранного вами правильного ответа.
    – Visman
    25 сен 2015 в 11:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.