Индикатор прокрутки страницы на CSS и JavaScript

Привет. На сайтах иногда используют так называемые индикаторы прокрутки страницы. Это когда начинаешь прокручивать страницу вниз, а сверху отображается прогресс прокрутки, то есть на сколько вы прокрутили. Это привлекает внимание внимание пользователя и дает ему некоторую информацию по ориентации на странице. Другими словами — хорошо видно сколько пролистал и сколько еще осталось. Но в первую очередь это относится к лендингам, именно у них страницы бывают очень длинными. У многостраничных сайтов обычно есть пагинация. Именно поэтому индикатор прокрутки стоит внедрять только на одностраничники. И сделать это совсем не сложно. Сейчас будем разбираться из чего он состоит. Смотрите, как это выглядит:

Демо

Сначала добавим разметку. После открывающего тега body добавим:

<div class="scroll-indicator" id="myBar"></div>

И CSS:

1
2
3
4
5
6
7
8
9
10
11

.scroll-indicator {
    width: 0;
    height: 4px;
    background: #2196f3;
    position: fixed;
    top: 0;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .3s ease;
    z-index: 99999;
}

Цвет индикатора прокрутки можно указать по вашему усмотрению. Так же я добавил transition, что позволит делать заполнение цветом индикатор более плавно. В таком виде мы ничего не увидим, пока не напишем несколько строк JS кода. Давайте это сделаем. Прошу обратить внимание, что подключать jQuery совсем необязательно.

1
2
3
4
5
6
7
8
9

// Scroll indicator
window.onscroll = function() {myFunction()};
 
function myFunction() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = scrolled + "%";
}

Если необходимо вывести процент прокрутки, то делаем это так:

element.innerHTML = Math.floor(scrolled)+ '%';

Оформить индикатор прокрутки можно как угодно и вывести на странице в любом месте. И как видите, способ незамысловатый, но добавит страничке дополнительную привлекательность.