Избегайте перехода окна вверх при нажатии # -links

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

Ссылки просто выглядят следующим образом:

<a href="#" id="myID">Myquestion</a>

И я использовал jQuery и .click как event-listener.

Есть ли какие-либо простые способы избежать этого, или мне нужно использовать .scroll и найти координаты вопроса? Я бы предпочел избежать этого.

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

Ответ 1

Вам нужно добавить preventDefault() к вашему обработчику кликов. Это заставит браузер выполнять собственный обработчик ссылок и будет запускать только указанный вами код.

Пример:

$("#myID").click(function(e) {
    e.preventDefault();
    // Do your stuff
});

Ответ 2

Не используйте теги A для задач, которые не связаны с навигацией. Это не семантическая разметка и не грамотно деградирует. Вместо этого используйте кнопки.

Ответ 3

Вы можете сделать это очень просто: Просто добавьте ! в конец вашего href:

<a href="#!" id="myID">Myquestion</a>

Альтернативными способами jQuery являются:

$("#myID").click(function(e) {
    e.preventDefault(); // one way 
    return false; // second way prevent default click action from happening
});

Ответ 4

$("#myID").click(function(e) {
    if(e.preventDefault)
        e.preventDefault();
    else
        e.stop();
});

e.preventDefault() не работал в более старых версиях IE.

Ответ 5

Фактически, самый простой способ сделать это - удалить атрибут href из тэга привязки. Начиная с HTML5, метки привязки не должны включать атрибуты href в семантический.

Итак,

<a id="myID">Myquestion</a>

вместо

<a href="#" id="myID">Myquestion</a>

Это работает в IE8 +, Chrome и Firefox. Обратите внимание, что: стили ссылок css не применяются к тегам привязки, которые не включают атрибуты href.

Если вам нужен атрибут href и/или совместимость с IE7, то

$("#myID").click(function(e) {
if(e.preventDefault)
    e.preventDefault();
else
    e.stop();
});

вероятно, лучший способ.

Ответ 6

$('a').click( function() {
  if ($(this).attr("href") == window.location.hash) {
    event.preventDefault()
  }
});

Ответ 7

Вы ищете event.preventDefault (см. jQuery API).

$(...).click(function(e) {
  e.preventDefault();
  // your code
});

Ответ 8

Внутри вашей функции:

And I've used jQuery and .click as event-listener.

Будет выглядеть примерно так:

$("#myID").click(function(){});

Измените это на (не забудьте параметр param внутри function(e):

$("#myID").click(function(e){
    e.preventDefault();
});

Ответ 9

Пример с хорошей прокруткой для ответа на содержимое:

$("#question_title").click(function(){
  var $answer=$("#answer");
  $answer.slideDown();
  $.scrollTo( $answer, 800 );
  return false;
});

Я использую jQuery scrollTo плагин.

Ответ 10

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

если селектор ex.. "body" присутствует во время первоначального рендера, затем используйте любой селектор.. id..., чтобы нацелить генератора на то, чтобы выполнить jQuery (начиная с 1.8.2). "On handler вызывается метод под названием" bind ", который используется для вновь добавленного контента в DOM". Используя "[href ^ = #], выберете любые href, которые находятся в теге раздела, но вы можете заменить раздел ничем или ничем и применяете отмену события click.Этот метод отлично подходит для динамически созданного контента для DOM

Ответ 11

Если вы добавите "\" в "#", это не позволит перейти в начало.

<a href="#\" id="myID">Myquestion</a>

Ответ 12

HTML:

<a id="like-post" href="#\">like</a>

JavaScript:

$('body').delegate('#like-post','click',function(e) {
     e.preventDefault();
     .....
});