Понимание <a href = "#!"

Question

Я искал способ предотвратить быть доставлен в верхней части страницы после нажатия на ссылку с # внутри href атрибута:

<a href="#" onclick="foobar()">click me</a> 

и потом я наткнулся на это простое решение, переключение # для #!:

<a href="#!" onclick="foobar()">click me</a> 

Существовали различные другие решения доступны в Интернете с помощью JQuery, например:

$('.service').click(function(e) { 
    e.preventDefault(); 
}); 

Я закончил тем, что любил #! максимум за то, что так чистый НО Я НЕ СМОГ найти любую документацию в любом месте в Интернете, как к тому, что было на самом деле происходит при вставке ! в строке кода.

ВОПРОС:

Что #! фактически вызывает HTML-код, чтобы сделать? Является ли это хорошим способом предотвратить действие по умолчанию для перехода пользователя в начало страницы или это плохой метод по другим причинам? Я боюсь, что это может быть хакерский метод, который несовместим с некоторыми браузерами.

Answer 1

Что такое #! Фактически возникает код html?

Сообщается обозревателю, что при нажатии этой ссылки он должен прокручивать страницу до якоря !. Поскольку на странице нет такого якоря, страница не перемещается. (Технически, вы могли иметь якорь с именем ! на странице [! является вполне допустимым значением HTML id]. Это просто ... Вы, наверное, нет.)

Вы создаете якорь на странице путем назначения значений id элементам (или с использованием устаревшей конструкции <a name="...">...</a>); href s с идентификатором фрагмента (бит, следующий за #), сообщит обозревателю, чтобы загрузить ресурс (в вашем примере это уже загруженная страница), а затем прокрутите вниз до этого якоря. Так, например, если у вас есть <div id="foo">...</div> на странице, перейдите на #foo на этой странице, браузер прокрутит вниз, чтобы этот div показывался. Когда вы поставляете несуществующий якорь, прокрутка не выполняется.