Jquery SlideToggle И прокрутка - PullRequest
Новая
       15

Jquery SlideToggle И прокрутка

4 голосов
/ 12 апреля 2011

У меня проблема со ссылкой на слайд-переключатель, которая появляется внизу моей страницы. По сути, я хочу, чтобы пользователь щелкнул, чтобы показать / скрыть скрытый элемент (который работает нормально)

Проблема в том, что страница не прокручивается вниз, чтобы показать текущее, а не скрытое div

Как новичок в JQuery, есть ли способ переключить div и затем центрировать его на странице? Или, по крайней мере, прокрутить вниз, чтобы все не было слишком сложно?

Спасибо

1 Ответ

1 голос
/ 12 апреля 2011

Чтобы выполнить эту функцию, я бы рекомендовал использовать обратный вызов из вашего вызова slideToggle, чтобы установить прокрутку документа с помощью функции scrollTop .Вы сможете определить значение для установщика scrollTop, используя offset , чтобы получить верхнюю позицию переключаемого контейнера относительно страницы.Я бы рекомендовал ограничить поведение прокрутки, чтобы оно срабатывало только тогда, когда элемент показан, а не скрыт.

В общем, прямая настройка прокрутки страницы может быть слегка раздражающей.По этой причине я на самом деле собираюсь дать вам код, который анимирует scrollTop, а не прямо устанавливает его с помощью функции scrollTop, но этот подход не является необходимым, так как прямой вызов scrollTop будет в равной степени позиционировать страницу.Я просто думаю, что как пользователь я бы предпочел видеть постепенную прокрутку, а не внезапное изменение положения.

Код, например, будет иметь вид: 

$(".myShowHideLink").click(function() {
    $(".myToggleContainer").slideToggle("slow", function() {
        if ($(this).is(":visible")) {
            $(document).animate({
                scrollTop: $(this).offset().top
            }, "slow")
        }
    });
});

Возможно, вы захотитена самом деле использовать $(this).offset().top - 50 или что-то подобное, поэтому прокрутка установлена ​​всего на несколько пикселей выше верхней части контейнера, но это ваше дело.Я считаю, что мне не нравится, когда мои элементы соприкасаются с верхней границей окна.

Я извиняюсь, что не создал для этого тестовый пример, так как стреляю с бедра, но еслиэто не работает, как рекламируется, дайте мне знать, и я буду корректировать код.

...