JavaScript: прокрутка страницы до div элемента по клику

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

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

Скопировать код

document.querySelector('#targetDiv').scrollIntoView();

Если же вам подходит более плавный переход, то в таком случае следует применить следующий вариант:

Скопировать код

document.querySelector('#targetDiv').scrollIntoView({ behavior: 'smooth' });

В обоих примерах вместо '#targetDiv' должен указываться селектор целевого блока.

Настройки для удобства

Конфигурация смещения прокрутки

Чтобы придать прокрутке дополнительную "легкость", вы можете использовать смещение:

Скопировать код

const element = document.querySelector('#targetDiv');
const offset = 100; // Добавляется отступ для оптимизации прокрутки!
const elementPosition = element.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset – offset;

window.scrollTo({
  top: offsetPosition,
  behavior: 'smooth'
});

Прокрутка при наступлении события

Вы можете реализовать прокрутку страницы при клике на кнопку:

Скопировать код

document.getElementById('scrollButton').addEventListener('click', function() {
  document.querySelector('#targetDiv').scrollIntoView({ behavior: 'smooth' });
});

Убедитесь, что ваш блок готов "принять" пользователя.

Интеграция прокрутки с динамическим контентом

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

Скопировать код

// Функция для динамической загрузки контента
function loadYourContent(callback) {
  // Здесь происходит загрузка контента
  callback();
}

loadYourContent(function() {
  document.querySelector('#dynamicDiv').scrollIntoView({ behavior: 'smooth' });
});

Переда откруткой, убедитесь в завершении загрузки контента.

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

Продуктивное восприятие кода помогает примерная визуализация. Представьте вашу страницу как многоэтажный небоскреб, где целевой блок — это эксклюзивный пентхаус:

Markdown

Скопировать код

🌇 <html> Главное вход
|
|    🏢 <header> Управляющие этажи
|    🏢
🔝---🌴 <div id="penthouse"> Ваш пентхаус
|    🏢
|    🏢 <footer> Лобби
🌃 </html> Город

JavaScript поможет вам быстро добраться до вершины:

Скопировать код

document.querySelector('#penthouse').scrollIntoView();

И вот вы уже на месте:

Markdown

Скопировать код

🌇
|
|    
|    
🔝---🚶‍♂️ Вы в пентхаусе
|    
|    
🌃

Подробности реализации

Исследование альтернатив

Если scrollIntoView() вам не подошло, вы можете использовать HTML-якоря или функцию jQuery animate для плавной прокрутки:

HTML

Скопировать код

<!-- HTML-якорь -->
<a href="#targetDiv">Перейти к блоку</a>

<!-- Якорная цель -->
<div id="targetDiv"></div>

Используя jQuery:

Скопировать код

$('a[href^="#"]').on('click', function() {
  var target = $(this.hash);
  if (target.length) {
    $('html, body').animate({ scrollTop: target.offset().top }, 1000);
    return false;  // Это предотвращает стандартное поведение якоря
  }
});

Кросс-браузерность

Не забывайте проверять совместимость вашего решения с различными браузерами.

Обеспечение доступности

Ориентируйтесь на удобство всех пользователей, включая вспомогательные технологии. Используйте ARIA-роли для упрощения навигации.

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

Element: scrollIntoView() method – Web APIs | MDN — описание метода scrollIntoView для JavaScript.
Smooth Scrolling | CSS-Tricks — плавная прокрутка с помощью jQuery.
javascript – Smooth scroll to div id jQuery – Stack Overflow — обсуждение плавной прокрутки к блоку.
.animate() | jQuery API Documentation — документация функции animate на jQuery.
GitHub – cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links. — лёгкий скрипт для создания плавной прокрутки.
javascript – Using jQuery to center a DIV on the screen – Stack Overflow — методы центрирования элементов на экране с использованием jQuery.
Intersection Observer API – Web APIs | MDN — возможность обнаружения элементов в области просмотра браузера и активация плавной прокрутки.