Как остановить прокрутку веб-страницы до вершины при нажатии ссылки, которая запускает JavaScript?

Когда у меня есть ссылка, связанная с событием jQuery или JavaScript, например:

<a href="#">My Link</a>

Как предотвратить прокрутку страницы вверху? Когда я удаляю атрибут href из привязки, страница не прокручивается вверху, но ссылка, похоже, не работает с кликом.

Ответ 1

Вам нужно предотвратить действие по умолчанию для события клика (т.е. перехода к целевой ссылке).

Есть два способа сделать это.

Вариант 1: `event.preventDefault()`

Вызвать метод .preventDefault() объекта события, переданного вашему обработчику. Если вы используете jQuery для привязки ваших обработчиков, это событие будет экземпляром jQuery.Event, и это будет версия jQuery .preventDefault(). Если вы используете addEventListener для привязки ваших обработчиков, это будет Event и необработанная версия DOM .preventDefault(). В любом случае вы будете делать то, что вам нужно.

Примеры:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

Вариант 2: `return false;`

В jQuery:

Возврат false из обработчика событий автоматически вызовет event.stopPropagation() и event.preventDefault()

Итак, с помощью jQuery вы также можете использовать этот подход для предотвращения поведения ссылки по умолчанию:

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

Если вы используете сырые события DOM, это также будет работать и в современных браузерах, поскольку спецификация HTML 5 диктует это поведение. Однако более старые версии спецификации не выполнялись, поэтому, если вам нужна максимальная совместимость со старыми браузерами, вы должны явно называть .preventDefault(). См. event.preventDefault() vs. return false (без jQuery) для подробной информации о спецификации.

Ответ 2

Вы можете установить href на #! вместо #

Например,

<a href="#!">Link</a>

не будет прокручиваться при нажатии.

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

Вот сценарий, иллюстрирующий это (просто попробуйте свой браузер, пока не получите полосу прокрутки):
http://jsfiddle.net/9dEG7/

Для спецификаторов - почему это работает:

Это поведение указано в спецификации HTML5 в разделе "Навигация к фрагменту" . Причина, по которой ссылка с href "#" заставляет прокручивать документ вверху, заключается в том, что это поведение явно указано как способ обработки пустого идентификатора фрагмента:

2. Если fragid - пустая строка, указанная часть документа является верхней частью документа

Использование href "#!" вместо этого работает просто потому, что оно избегает этого правила. Там нет ничего волшебного в восклицательном знаке - он просто делает удобный идентификатор фрагмента, потому что он заметно отличается от типичного хрупкого и вряд ли когда-либо будет соответствовать id или name элемента на вашей странице. Действительно, мы могли бы положить почти что-нибудь после хэша; единственными фрагментами, которых недостаточно, являются пустая строка, слово "верх" или строки, которые соответствуют атрибутам name или id элементов на странице.

Точнее, нам просто нужен идентификатор фрагмента, который заставит нас перейти к шагу 8 в следующем алгоритме для определения указанной части документа из fragid:

Примените алгоритм парсера URL к URL-адресу и пусть fragid будет компонентом фрагмента полученного анализируемого URL.

Если fragid - пустая строка, указанная часть документа является верхней частью документа; остановите алгоритм здесь.

Пусть fragid bytes является результатом процентного декодирования fragid.

Пусть decoded fragid является результатом применения алгоритма декодирования UTF-8 до fragid bytes. Если декодер UTF-8 испускает ошибку декодера, отмените декодер и вместо этого перейдите к шагу с меткой no decoded fragid.

Если в DOM есть элемент, который имеет идентификатор, равный decoded fragid, то первым таким элементом в древовидном порядке является указанная часть документа; остановите алгоритм здесь.

Нет декодированного fragid: если в DOM есть элемент, у которого есть атрибут имени, значение которого точно равно fragid (not decoded fragid), то первым таким элементом в древовидном порядке является указана часть документа; остановите алгоритм здесь.

Если fragid - это несовместимое с ASCII совпадением для строки top, то указанная часть документа является верхней частью документа; остановите алгоритм здесь.

В противном случае нет указанной части документа.

Пока мы нажимаем на шаге 8 и нет указанной части документа, вступает в игру следующее правило:

Если нет указанной части... тогда пользовательский агент ничего не должен делать.

поэтому браузер не прокручивается.

Ответ 3

Простым подходом является использование этого кода:

<a href="javascript:void(0);">Link Title</a>

Этот подход не заставляет обновлять страницу, поэтому полоса прокрутки остается на месте. Кроме того, он позволяет программно изменять событие onclick и обрабатывать привязку к стороне клиента с помощью jQuery.

По этим причинам вышеупомянутое решение лучше, чем:

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

где последнее решение позволит избежать проблемы с прокруткой, если и только если метод myClickHandler не завершился.

Ответ 4

Возврат false из кода, который вы вызываете, будет работать, и в ряде случаев это предпочтительный метод, но вы также можете это сделать

<a href="javascript:;">Link Title</a>

Когда дело доходит до SEO, это действительно зависит от того, для чего будет использоваться ваша ссылка. Если вы собираетесь использовать его для ссылки на какой-либо другой контент, то я бы согласился в идеале, что вы хотите что-то значимое здесь, но если вы используете ссылку для функциональных целей, возможно, например, Qaru делает для панели сообщений (жирный, курсив, гиперссылка, и т.д.), то это, вероятно, не имеет значения.

Ответ 5

Попробуйте следующее:

<a href="#" onclick="return false;">My Link</a>

Ответ 6

Ссылка на что-то более разумное, чем верхняя часть страницы в первую очередь. Затем отмените событие по умолчанию.

См. правило 2 прагматическое прогрессивное улучшение.

Ответ 7

Если вы можете просто изменить значение href, вы должны использовать:

<a href="javascript:void(0);">Link Title</a>

Еще одно удобное решение, с которым я только что придумал, - использовать jQuery, чтобы остановить действие клика и вызвать прокрутку страницы, но только для ссылок href="#".

<script type="text/javascript">
    /* Stop page jumping when links are pressed */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

Ответ 8

Кроме того, вы можете использовать event.preventDefault внутри атрибута onclick.

<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

Не нужно писать exstra click event.

Ответ 9

Вы должны изменить

<a href="#">My Link</a>

<a href="javascript:;">My Link</a>

Таким образом, когда нажимается ссылка, страница не будет прокручиваться вверх. Это более чистое, чем использование href= "#", а затем предотвращение запуска по умолчанию.

У меня есть веские причины для этого при первом ответе на этот вопрос, например, return false; не будет выполняться, если вызываемая функция выдает ошибку, или вы можете добавьте функцию return false; в doSomething(), а затем забудьте использовать return doSomething();

Ответ 10

Вы также можете написать так: -

<a href="#!" onclick="function()">Delete User</a>

Ответ 11

При вызове функции следуйте за ней return false Пример:

<input  type="submit" value="Add" onclick="addNewPayment();return false;">

Ответ 12

Создайте страницу, содержащую две ссылки: одну вверху и одну внизу. При нажатии на верхнюю ссылку страница должна прокручиваться вниз до нижней части страницы, где присутствует нижняя ссылка. При нажатии на нижнюю ссылку страница должна прокручиваться до верхней части страницы.

Ответ 13

<a onclick="yourfunction()">

это будет работать нормально. нет необходимости добавлять href= "#"

Ответ 14

Возможно, вы захотите проверить свой CSS. В примере здесь: https://css-tricks.com/the-checkbox-hack/ there position: absolute; top: -9999px;. Это особенно неприятно для Chrome, так как onclick="whatever" все еще перескакивает в абсолютное положение щелкнутого элемента.

Удаление position: absolute; top: -9999px;, для display: none; может помочь.