Дублируем навигацию в конце страницы урока GetCourse

В длинных текстово-графических уроках на GetCourse сильно не хватает навигации в конце. Дочитав урок до конца, пользователю приходится скроллить наверх, чтобы перейти к следующему уроку. Когда информации действительно много, это становится неудобным.

Проблему решает скрипт кнопки «Наверх», позволяющий быстро перемотать страницу к началу, либо дублирование навигации из шапки урока. Либо оба метода сразу. Здесь я поделюсь скриптом, дублирующим навигацию.

Код проверяет, является ли текущая страница уроком (по URL) и если да, ищет в коде страницы навигационный блок «Предыдущий урок / Следующий урок». Затем создаёт дубль этого блока, добавляет к нему дополнительный класс, чтобы можно было применить другие стили, и помещает в конец страницы.

Если в уроке включены задания и/или комментарии, блок навигации будет под ними.

// Функция для добавления копии навигационного блока внизу страницы
function addNavigationBottom() {

    // Проверяем, содержит ли текущий URL /teach/control/lesson/
    if (window.location.href.includes('/teach/control/lesson/')) {

        // Находим оригинальный блок навигации
        const navigationTop = document.querySelector('.lesson-navigation');
        
        // Если такой блок существует
        if (navigationTop) {

            // Создаем его клон
            const navigationBottom = navigationTop.cloneNode(true);
            
            // Добавляем дополнительный класс
            navigationBottom.classList.add('lesson-navigation-bottom');
            
            // Находим контейнер с содержимым урока
            const lessonContent = document.querySelector('.lite-page.block-set');
            
            // Вставляем копию навигации в конец содержимого урока
            lessonContent.appendChild(navigationBottom);
        }
    }
}

// Вызываем функцию при загрузке страницы
document.addEventListener('DOMContentLoaded', addNavigationBottom);

Скрипт написан с помощью GigaChat.

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

Вход