😎 » JavaScript » Примеры JavaScript » Індикатор прокрутки на JS
45 0  

Індикатор прокрутки на JS

На сайтах іноді використовують так звані індикатори прокручування сторінки. Це коли починаєш прокручувати сторінку вниз, а згори відображається прогрес прокручування, тобто на скільки ви прокрутили.

Це привертає увагу користувача і дає йому деяку інформацію щодо орієнтації на сторінці. Іншими словами — добре видно, скільки перегорнув і скільки ще залишилося. Але насамперед це стосується лендингів, саме у них сторінки бувають дуже довгими.

Багатосторінкові сайти зазвичай мають пагінацію.

Саме тому індикатор прокручування варто впроваджувати лише на односторінники. І зробити це зовсім не складно. Зараз розбиратимемося з чого він складається. Дивіться, як це виглядає:

Виконуваний код:

<div class="scroll-indicator" id="myBar"></div> <script> // 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)+ '%'; </script> <style> .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; } </style>

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023