Проблемы с задержкой Jquery scrollTop и height .click

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

Пример можно посмотреть здесь: http://www.icecable.com/sandbox/priority%5Fsign%5Fup/test.html

Нажмите «Зарегистрироваться сейчас», и анимация заработает правильно. Нажмите «Закрыть и вернуться к началу», и анимация снова работает правильно. Проблема возникает после этого.

Если вы попытаетесь нажать любую кнопку «Зарегистрироваться сейчас», анимация «высота» начнется как обычно, но анимация «scrollTop» будет иметь большую задержку без видимой причины.

Вот мой код

$(document).ready(function() {

$('.dealer').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.dealer').click(function(e) {
    e.preventDefault();
  $('#priority').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#priority')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

});

//Form for Distributors

$('.distributor').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '860'
    }, 1800, "easeInOutQuint");
});

$('.top').click(function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: '0px'
    }, 1500, "easeInOutQuint");
});

$('.distributor').click(function(e) {
    e.preventDefault();
  $('#distributor').animate({
    height: 'show'
    }, 1200,  "easeInOutCirc");
});

$('.top').click(function(e) {
    e.preventDefault();
  $('#distributor')
    .animate({
        height: 'hide'
        }, 590, "easeInQuint");

    });
});

Что-то я делаю не так? Есть ли способ сбросить события после того, как формы снова были скрыты? Любая помощь/понимание/ресурсы будут очень признательны!

Воля


person CabralMedia    schedule 20.03.2013    source источник


Ответы (1)


Без скрипки я не могу сказать наверняка, но я предлагаю вам использовать некоторые вызовы console.log для вывода начального и конечного scrollTop значений. У меня были некоторые подобные проблемы раньше, и они, как правило, из-за проблем с прокруткой неправильных сумм и восстановлением неправильных сумм.

Вероятный случай, который вы можете не заметить, заключается в том, что при прокрутке назад ваше значение scrollTop выходит за пределы 0 до некоторого отрицательного числа. Окно не может прокрутиться до отрицательного значения scrollTop, поэтому ему придется «подождать», пока значение не вернется к 0, прежде чем оно сможет начать видимую анимацию.

ПРИМЕЧАНИЕ. Это может произойти, даже если вы установили scrollTop на ноль, так как это могло не быть его начальным положением. Когда я сказал «отрицательно», я имел в виду «отрицательно относительно исходного положения».

Обновление: взгляните на эта страница. Он также ссылается на соответствующий пост SO и рассказывает, как плавно прокрутить вверх. Раньше я использовал модифицированные версии кода, и, хотя они очень похожи на то, что у вас есть, сообщения SO могут дать вам немного больше информации.

Я бы также изменил ваши функции animate, чтобы они вызывали только элемент "html" вместо элементов "html" и "body".

person Zachary Kniebel    schedule 20.03.2013
comment
Очень ценный ответ! Я попытался отредактировать значения верхней позиции, но я все еще получал задержку. Я не уверен, как вызвать значения позиции, когда они прокручиваются в журнале консоли. Так что я не думаю, что он переходит в отрицательное число для позиции, но может просто пройти исходное число, как вы предложили. Я просто не могу понять, как это увидеть. Еще раз спасибо. - person CabralMedia; 22.03.2013
comment
Я не верю, что вы можете отображать позиции во время прокрутки (могу ошибаться - не помню), но пока вы можете проверить до начала прокрутки и после ее остановки, вы должны быть в состоянии получить что-то хорошее данные. - person Zachary Kniebel; 22.03.2013