Как отменить прокрутку вверх при клике на ссылку в JS

Быстрый ответ

Существует несколько способов избежать автоматической прокрутки страницы при клике на ссылку, активирующую функцию JavaScript:

• Вы можете использовать атрибут href="javascript:void(0);" для отключения стандартного действия ссылки.
• Вы также можете применить event.preventDefault() в обработчике события клика:

<a href="#" onclick="stopJump(event)">Без прыжков вверх</a>

<script>
function stopJump(event) {
  event.preventDefault();
  // Здесь будет ваша JavaScript-логика
}
</script>

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

Использование href для контроля прокрутки

Альтернативный вариант — использование href="!". Это помогает уменьшить негативное влияние на SEO и одновременно решает проблему с прокруткой:

<a href="!" onclick="stopJump(event)">Без прыжков вверх</a>

Такой подход обеспечивает удобочитаемость URL и предотвратит нежелательную прокрутку, хотя он не слишком распространен.

jQuery и стратегия Return False

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

$('a').click(function(event) {
  // Здесь находится ваш JavaScript-код
  
  return false;  // Прокрутки страницы не будет
});

Влияние на SEO и историю браузера

Если изменяете поведение ссылок, не забывайте про SEO и его влияние на историю браузера. Использование window.location.hash или работы с History API может помочь в организации корректного поведения страницы без ущерба для SEO.

Визуализация

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

📖 [🔝 Содержание]

Меняется на:

📖 Страница с Рецептом 1 – без прыжка наверх! 🎉

С помощью JavaScript можно создать интерактивные ссылки, которые не меняют положение просмотра на странице.

Сохранение работы и легкости чтения внешних ссылок

Очень важно сохранять доступность и рабочую эстетику внешних ссылок. Разделяйте HTML и JavaScript, используя слушатели событий:

document.querySelector('a.noJump').addEventListener('click', stopJump);

Такой подход улучшает взаимодействие с ссылками и упрощает чтение кода.

Борьба с особенностями старых браузеров

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

Полезные материалы

1. Метод Event: preventDefault() – Веб-API | MDN — подробно о том, как предотвратить стандартное действие события.
2. Понимание делегирования событий в JavaScript – DigitalOcean — статья, объясняющая все о делегировании событий в JavaScript.
3. Событие Window: hashchange – Веб-API | MDN — рассказывает о работе с hashchange как альтернативе прокрутки.
4. API истории – Веб-API | MDN — предлагает управление историей браузера.
5. WebAIM: Ссылки и гипертекст – Текст ссылок и внешний вид — учит создавать удобные для чтения и использования ссылки.
6. Объяснение Debounce и Throttle с примерами | CSS-Tricks — введение в техники управления интенсивностью выполнения кода.