Прокрутка к нужному элементу, функция scrollToNode ()

Плавная прокрутка к нужному элементу ― классический приём для улучшения UX. В ядре 1С-Битрикс уже есть готовый метод BX.scrollToNode, который избавляет от ручного расчёта координат и кросс-браузерных хаков. В статье разберём сигнатуру функции, приведём типовые и нетиповые кейсы, подскажем, какие ошибки встречаются чаще всего и как их избежать.

BX.scrollToNode(
    // обязательный параметр: DOM-элемент, к которому нужно прокрутиться
    node
);

Метод анимирует прокрутку окна браузера (или ближайшего скроллируемого контейнера ― об этом ниже) так, чтобы верхняя граница указанных нод оказалась вверху видимой области. Алгоритм учитывает отступы документа и работает во всех актуальных браузерах, поддерживаемых ядром Битрикса.

Минимальный рабочий пример

Что нужно учесть:

Подключаем ядро, скрипт /bitrix/js/main/core/core.js уже содержит метод BX.scrollToNode
Используем BX.ready для гарантии, что DOM загружен
Передаём именно DOM-узел, а не строковый id или jQuery-объект

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>BX.scrollToNode — базовый пример</title>
    <script src="/bitrix/js/main/core/core.js"></script> <!-- ядро Битрикса -->
    <style>
        body {margin: 0;}
        header, footer {height: 100vh; display:flex; align-items:center; justify-content:center;}
        header {background:#e3f2fd;}
        footer {background:#ffecb3;}
        #scroll-btn{
            cursor:pointer; margin:1rem auto; padding:.7rem 1.2rem;
            background:#607d8b; color:#fff; border:none; border-radius:.5rem;
            box-shadow:0 2px 8px rgba(0,0,0,.25); font-size:1rem;
        }
    </style>
</head>
<body>
<header>
    <button id="scroll-btn">Прокрутить к футеру</button>
</header>
<footer id="footer">
    <h2>Вы добрались до футера </h2>
</footer>
<script>
BX.ready(function () {
    BX.bind(BX('scroll-btn'), 'click', function () {
        BX.scrollToNode(BX('footer'));
    });
});
</script>
</body>
</html>

Автопрокрутка к якорю из URL при загрузке страницы

BX.ready(function () {
    var hash = location.hash.replace('#', '');
    if (hash) {
        var target = BX(hash);
        if (BX.type.isDomNode(target)) {
            BX.scrollToNode(target);
        }
    }
});