Вход

Если у вас возникли проблемы, пожалуйста, дайте мне знать, отправив электронное письмо на evgeniy@y-ea.ru. Спасибо!

Забыли пароль или не зарегестрированны?

Плавный скролл к нужному блоку на другой странице

Evgeniy / 18 января 2024 / Опубликовано в Блог
Плавный скролл к нужному блоку на другой странице

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

window.addEventListener('load', function() {
    const  windowHash = window.location.hash;
    if (windowHash) {
        // Удаляем символ '#' из хеша
        const  blockId = windowHash.substring(1);
        const  curBlock = document.getElementById(blockId);
        if (curBlock) {
            // Вычисляем позицию элемента относительно верхней границы документа
            const  topOffset = curBlock.offsetTop;

            // Используем window.scrollTo для плавного скролла к элементу
            window.scrollTo({
                top: topOffset,
                behavior: 'smooth'
            });
        }
    }
});

Этот код использует addEventListener для отслеживания события load окна браузера, чтобы гарантировать, что код будет выполнен после полной загрузки страницы. Затем он извлекает хеш из URL, удаляет символ # и ищет элемент по полученному идентификатору. Если элемент найден, он вычисляет его позицию относительно верхней границы документа и использует window.scrollTo для плавного скролла к этой позиции.

Обратите внимание, что здесь const используется для переменных, которые не будут изменяться после их инициализации, а let может быть использован, если вы планируете изменять значение переменной после инициализации.

Для тех кому интересно, вот плавный скролл к нужному блоку на jQuery, код ниже:

$(window).on('load', function() {
    var windowHash = window.location.hash;
    if (windowHash) {
        // Удаляем символ '#' из хеша
        var blockId = windowHash.substring(1);
        var curBlock = document.getElementById(blockId);
        if (curBlock) {
            // Используем jQuery для плавного скролла к блоку
            $('html, body').animate({
                scrollTop: $(curBlock).offset().top
            }, 500);
        }
    }
});

Модифицируёте код под вашу задачу и у Вас всё получится smiley


Комментарии отсутствуют

Новый комментарий

Имя:
:
Для редактирования комментария осталось 10 минут
TOP

Оставить заявку