Страница переходит наверх jquery .animate

Моя проблема заключается в том, что когда я нажимаю на div (фиксированное положение), чтобы анимировать другой div, вся страница перескакивает наверх. Я пробовал preventDefault и возвращал false, но ничего не решило проблему! Пожалуйста помоги.

Вот сценарий

$(document).ready(function(){

    $("#close").click(function(){
        $("#info").animate({ 
            width: "0",
            height:"0"
        }, 100 );

        $("#info").hide(),
        $(".container").animate({ 
            left:"0",
            width:"100%"
        }, 100 );
        return false;
    });

    $(".sidebar").click(function(evt){
        evt.preventDefault();
        $("#info").show(),
        $("#info").animate({ 
            width: "25%",
            height:"100%",
            left:"0"
        }, 100 );

        $(".container").animate({ 
            left: "25%",
            width:"75%"
            }, 100 );
        return false;
    });
});

person Melzee    schedule 16.10.2012    source источник
comment
Попробуйте изменить интервал на 1500 вместо 100   -  person Sushanth --    schedule 16.10.2012
comment
есть ли какая-то особая причина, по которой вы используете запятые после hide() и show() вместо точки с запятой?   -  person mason81    schedule 16.10.2012
comment
Susanth - это просто замедляет анимацию div, страница все равно переходит наверх   -  person Melzee    schedule 16.10.2012
comment
mason81 Я заменил запятые на точки с запятой. Как видите, я учусь :)   -  person Melzee    schedule 16.10.2012
comment
Попробуйте event.stopPropagation(); ссылку   -  person Ron van der Heijden    schedule 16.10.2012
comment
@Bondye Не имеет значения - return false; заботится как о preventDefault, так и о stopPropagation ... поэтому в этом случае evt.preventDefault() является избыточным при использовании return false; в конце.   -  person Ian    schedule 02.11.2012


Ответы (1)


Если элемент триггера является пустым якорем

<a href="#">some val</a>

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

$('a[href=#]').on('click', function(e){
     e.preventDefault();
 });

Или вы можете сделать это так же, как они сделали 10 лет назад: изменить пустой href ссылки на пустой оператор javascript:

<a href="javascript:void();">some val</a>

update
Посмотрев на разметку, я нашел решение. Все, что вам нужно сделать, это убедиться, что ваш .container имеет возможность прокрутки. Во время анимации элементы получают свойство css overflow : hidden (я действительно не знаю, откуда оно берется), и это сбрасывает вашу позицию прокрутки. Итак, все, что вам нужно сделать, это добавить это в вашу таблицу стилей:

.container{
    overflow: auto !important;
}
person gion_13    schedule 16.10.2012
comment
Спасибо за ответ, триггер просто ‹div class=sidebar›‹h2›октябрь 2012‹/h2›‹/div› с событием click, определенным для этого div в готовом документе. - person Melzee; 16.10.2012
comment
Ну, извините, но без какой-либо другой разметки html/css я не могу понять, что происходит. Рассмотрите возможность создания живой демонстрации через jsfiddle.net. - person gion_13; 16.10.2012
comment
Гион, ты легенда. Я так застрял на этом, думая, что это, должно быть, мое отсутствие знаний javacript отбрасывает меня назад! Но на самом деле это было в CSS - я бы никогда не взял это! СПАСИБО!!! - person Melzee; 22.10.2012