JavaScript: функция перехода к элементу страницы по id

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

Для указания конкретного места прокрутки на веб-странице применяются якорные ссылки. Создайте ссылку, атрибут href которой будет содержать символ # и идентификатор целевого элемента. Например, <a href="#section">Перейти к разделу</a> будет направлять пользователя к элементу <div id="section">...Целевой контент...</div>.

Пример кода:

<a href="#section">Перейти к разделу</a>
<!-- Промежуточный контент -->
<div id="section">Целевой контент</div>

При нажатии на ссылку браузер автоматически переместит вас к элементу, идентификатор которого #section, расположив его в верхней части области просмотра.

JavaScript и управление прокруткой

Если требуется более продвинутое управление прокруткой, JavaScript предоставляет для этого различные методы:

Просто и ясно: метод scrollIntoView()

Метод element.scrollIntoView() позволяет переместить элемент в область видимости, выравнивая его по верхнему краю экрана.

document.getElementById("section").scrollIntoView();

Если же хочется выровнять элемент по нижнему краю, передайте в параметр значение false:

document.getElementById("section").scrollIntoView(false);

Важно: Перед использованием scrollIntoView() проверьте, действительно ли целевой элемент существует.

const element = document.getElementById("section");
if (element) element.scrollIntoView();

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

Плавный скроллинг с jQuery

Плавную прокрутку до желаемого раздела возможно осуществить с помощью метода animate(), комбинируя его с scrollTop(), предоставляемым библиотекой jQuery:

$('html, body').animate({
    scrollTop: $("#section").offset().top
}, 1000);

Страница будет плавно прокручиваться к указанному разделу в течение 1000 миллисекунд.

Искусство настройки: плагин для jQuery

Создание собственного плагина jQuery позволит обеспечить дополнительную гибкость и продлить цепочку вызовов:

(function($) {
    $.fn.scrollToElement = function(options) {
        var settings = $.extend({
            duration: 1000
        }, options);

        this.each(function() {
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, settings.duration);
        });

        return this;
    };
}(jQuery));

Плагин запускается следующим образом:

$("#section").scrollToElement({
    duration: 2000
});

Видимость важна

Убедитесь, что элемент, к которому осуществляется прокрутка, отображается на странице. Скрытые элементы (display: none или visibility: hidden) останутся невидимыми даже после прокрутки.

IFrame на iOS: особенности работы

Обработка iframes на устройствах iOS требует специфических подходов. scrollIntoView() помогает сделать пользовательский опыт более комфортным благодаря специфическим настройкам для iOS.

Хитрые переходы: событие hashchange

Событие hashchange отличается от якорных ссылок, но оно заслуживает вашего внимания. Гармоничное сочетание прокрутки и хэш-событий повышает интерактивность веб-страницы.

Не прыгайте с головой: загрузка страницы и скрипты прокрутки

Размещайте скрипты управления прокруткой внутри обработчика jQuery(document).ready(). Это гарантирует, что они будут запущены после полной загрузки страницы, исключая возможные ошибки:

$(document).ready(function(){
    // Скрипты прокрутки добавляются здесь
});

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

1. Элемент <a> на ресурсе MDN — подробное изучение HTML-элемента якоря.
2. Руководство по реализации плавной прокрутки на сайте W3Schools.
3. Способы плавной прокрутки на сайте CSS-Tricks.
4. Рекомендации W3C по вопросам доступности HTML-контента — руководство по созданию доступного HTML.
5. Фрагмент HTML-стандарта о якорных ссылках — официальная документация.
6. Советы по созданию доступных гиперссылок от WebAIM — рекомендации по формированию доступных и интуитивно понятных текстовых ссылок.