Получить профессию в Skypro
JavaScript: прокрутка страницы до div элемента по клику
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Если вам нужно, чтобы страница мгновенно переместилась к определённому разделу, используйте следующий код:
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' });
});Переда откруткой, убедитесь в завершении загрузки контента.
Визуализация
Продуктивное восприятие кода помогает примерная визуализация. Представьте вашу страницу как многоэтажный небоскреб, где целевой блок — это эксклюзивный пентхаус:
🌇 <html> Главное вход
|
| 🏢 <header> Управляющие этажи
| 🏢
🔝---🌴 <div id="penthouse"> Ваш пентхаус
| 🏢
| 🏢 <footer> Лобби
🌃 </html> ГородJavaScript поможет вам быстро добраться до вершины:
document.querySelector('#penthouse').scrollIntoView();И вот вы уже на месте:
🌇
|
|
|
🔝---🚶♂️ Вы в пентхаусе
|
|
🌃Подробности реализации
Исследование альтернатив
Если scrollIntoView() вам не подошло, вы можете использовать HTML-якоря или функцию jQuery animate для плавной прокрутки:
<!-- 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 — возможность обнаружения элементов в области просмотра браузера и активация плавной прокрутки.