jquery щелкните якорный элемент, чтобы прокрутить его вверх?

Question

Гиперссылки jQuery – значение href? текст 1]

У меня возникла проблема с использованием jquery и события щелчка, прикрепленного к элементу привязки.[1]: Гиперссылки jQuery – значение href? «Этот» вопрос SO кажется дубликатом, и принятый ответ, похоже, не решает проблему.Извините, если это плохой этикет.

В моей функции .ready() у меня есть:

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
        Function_that_does_ajax();
        });

и мой якорь выглядит так:

<a href="#" id="id_of_anchor"> link text </a> 

но при нажатии на ссылку функция ajax выполняется по желанию, но браузер прокручивается к началу страницы.не хорошо.

Я попробовал добавить:

event.preventDefault(); 

перед вызовом моей функции, которая выполняет ajax, но это не помогает.Что мне не хватает?

Разъяснение

Я использовал каждую комбинацию

return false;
event.preventDefault(); 
event.stopPropagation();

до и после моего вызова моей функции js ajax.Он по-прежнему прокручивается вверх.

Answer 1

Это должно сработать, можете ли вы уточнить, что вы подразумеваете под «до»?Ты делаешь это?

jQuery("#id_of_anchor").click(function(event) {
    event.preventDefault();
    Function_that_does_ajax();
});

Из-за этого должен работает в том смысле, что если он не работает, ВЫ делаете что-то не так, и нам нужно будет увидеть больше кода.Однако для полноты картины вы также можете попробовать следующее:

jQuery("#id_of_anchor").click(function() {
    Function_that_does_ajax();
    return false;
});

РЕДАКТИРОВАТЬ

Вот пример такой работы.

Две ссылки используют этот код:

$('#test').click(function(event) {
    event.preventDefault();
    $(this).html('and I didnt scroll to the top!');
});

$('#test2').click(function(event) {
    $(this).html('and I didnt scroll to the top!');
    return false;
});

И как вы можете видеть, они работают просто отлично.

Answer 2

вы можете использовать javascript:void(0);в свойстве href.

Answer 3

Как сказал Тилал выше:

<a id="id_of_anchor" href="javascript:void(0)" />

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

Answer 4

Этот вопрос скорее является упражнением по отладке, поскольку утверждается, что вы используете правильные функции из Объект события jQuery.

В обработчике событий jQuery вы можете выполнить одну или обе две основные вещи:

1.Предотвратите поведение элемента по умолчанию (в вашем случае A HREF="#):

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.preventDefault(); // assuming your handler has "evt" as the first parameter
  return false;
}

2.Остановите распространение события на обработчики событий в окружающих элементах HTML:

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}

Поскольку вы не получаете ожидаемого поведения, вам следует временно отключить вызов ajax, заменить его каким-нибудь безобидным кодом, например, установкой значения формы или -shudder- предупреждение("ОК") и проверьте, прокручиваете ли вы все еще вверх.

Answer 5

$("#id_of_anchor").click(function(event) { 
  // ...
  return false;
}

Answer 6

просто потеряй

href="#"

В теге html...именно это заставляет веб-страницу «подпрыгивать».

<a id="id_of_anchor"> link text </a>

и не забудьте добавить

cursor: pointer;

в CSS вашего a, чтобы при наведении курсора мыши он выглядел как ссылка.

Удачи.

Answer 7

У меня была такая же проблема.

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

Answer 8

Мне очень помог приведенный ниже код.Спасибо!

        $(document).ready(function() {
        $(".dropdown dt a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").toggle('slow');
        });           
        $(".dropdown dd ul li a").click(function(event) {
        event.preventDefault();
            $(".dropdown dd ul").hide();
        });
    });