Мини-карта для сайта со скроллом на JavaScriptСегодня мы хотим рассказать, как создать небольшую фичу для вашего сайта, а именно навигацию на странице сайта в виде небольшой карты, по которой можно быстро передвигаться тем самым переходить к нужному разделу очень быстро и интуитивно. В левом верхнем углу будет размещена карта с фиксированной позицией, которая будет реализована в виде уменьшенного содержания страницы. На ней будет отображен блок, который будет информировать о том, в какой части страницы именно вы находитесь, что удобно для сайтов с длинными страницами.

 

Если вы хотите создать красивый и стильный лендинг использовав готовый премиум шаблон с поддержкой обновления, а также адаптивности и русского языка, тогда обратите внимание на предложение от наших партнеров, так есть много интересных шаблонов.

Мини-карта для сайта со скроллом на JavaScript

Шаг 1. HTML

Для начала нужно создать разметку, в нашем случае разметка нам необходима исключительно для демонстрации с содержанием текста и изображения:

Как видите, здесь мы использовали несколько изображений и блоки с кодом, давайте перейдем к следующему шагу, а именно к стилизации.

Как создать навигатор на странице

Шаг 2. CSS

Так как у нас вся работа будет выполняться при помощи JavaScript, по этому стили у нас также буду иметь немного минимум содержания:

Шаг 3. JS

Теперь перейдем к последнему самому важному шагу, нам необходима обработка и отображение навигации в виде слайдера, в этом нам поможет следующий код js:

Результатом стал отличный навигационный блок для сайтов с большим текстовым содержанием, пользователь наглядно может понимать в какую часть страницы ему необходимо перейти. Спасибо Shaw за отличную реализацию.

Вот и все. Готово!