Прокрутка страницы к элементу div с помощью JavaScript

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

Чтобы мгновенно перейти к заданному элементу:

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

Для плавной прокрутки до элемента:

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

Вместо '#target' подставьте CSS-селектор требуемого элемента. Метод querySelector используется для гибкого выбора элементов.

Подробный обзор методов прокрутки

Мгновенная прокрутка без анимации

Если необходим мгновенный переход без анимационного сопровождения:

location.href = '#target';

Убедитесь, что у выбранного элемента присутствует id "target".

Подробнее об этом расскажет наш спикер на видео

Управление позицией прокрутки

Чтобы настроить позицию прокрутки собственноручно:

const pointOfInterest = document.getElementById('target');
const destination = pointOfInterest.getBoundingClientRect().top + window.scrollY;
window.scroll({ top: destination, behavior: 'smooth' });

Здесь учитывается текущее положение в окне просмотра.

Учёт фиксированных элементов

Если на странице есть элементы с фиксированной позицией:

const fixedHeaderHeight = -60;
const element = document.getElementById('target');
const positionY = element.getBoundingClientRect().top + window.scrollY + fixedHeaderHeight;

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

Особые аспекты прокрутки в браузерах на движке WebKit

В браузерах на движке WebKit прокрутка работает иначе:

if (document.body.scrollTop || document.documentElement.scrollTop) {
    location.href = "#";
    setTimeout(() => {
        element.scrollIntoView();
    }, 0);
}

Сначала страница прокручивается к начальной позиции, затем – к заданному элементу.

jQuery

Если вы работаете с jQuery:

$('#target').animate({
    scrollTop: $('#target').offset().top
}, 1000);

В течение одной секунды будет выполнена анимированная прокрутка до элемента.

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

Давайте пройдёмся по относительно простой схеме:

📍 = Ваше текущее местоположение
🎯 = Точка интереса (целевой элемент)

Вот как JavaScript поможет нам добраться до цели:

map.askJS('🎯');

Пройдёт перемещение, которое проиллюстрировано ниже:

Начало: 📍 ------------------ 🚶‍♂️ ---------- 🎯
После:   🚶‍♂️ -------------------------------- 🎯

Поздравляем! Вы успешно переместились к нужному элементу с минимальными затратами сил!

Дополнительные способы

Прокрутка с учетом абсолютного расположения элемента

Для прокрутки, учитывающей абсолютное положение элемента:

const yPos = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: yPos, behavior: 'smooth' });

Многоразовая функция для прокрутки

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

function scrollToElement(selector, offset = 0) {
    const element = document.querySelector(selector);
    const y = element.getBoundingClientRect().top + window.scrollY + offset;

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

scrollToElement('#target', -60);

Этот способ удобен при работе со страницами, где есть фиксированные элементы.

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

1. Element: scrollIntoView() method – Web APIs | MDN — Документация по методу scrollIntoView().
2. Smooth Scrolling | CSS-Tricks — Гид по реализации плавной прокрутки.
3. How To Create a Scroll Back To Top Button — Как создать кнопку "Наверх".
4. javascript – ScrollIntoView() causing the whole page to move – Stack Overflow — Решение проблемы с scrollIntoView().
5. Window scrollTo() Method — Документация метода scrollTo().
6. GitHub – cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links. — Легковесный скрипт для анимированной прокрутки.
7. How to Implement Smooth Scrolling in Vanilla JavaScript — SitePoint — Гид по созданию плавной прокрутки без использования внешних библиотек.