» »

Процент для прокрутки страниц сайта

Процент для прокрутки страниц сайта

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

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

Дело в том, что при открытие страницы или заходе на сайт вы видите такое табло, где по умолчанию выставлено ноль. Но только начнете просмотр страницы и опускать ее ниже, как автоматически процент станет повышаться, и вы доходите до самого низа, и на таблице высветило 100 процентов. Вот поэтому, когда вы прокручиваете и начинаете видеть элемент внизу, процент должен составлять около 1%, а когда элемент почти исчезает в верхней части, он должен составлять около намного больше.

Создание процентного показателя прокрутки веб-страницы


Scroll Percentage

Первым делом подключаем библиотеку, это у кого нет на сайте.

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Код
<body>
  <p id="prokru-kastran"></p>
  <p id="saytenkastranitsy">Scroll Percentage: <span>0</span>%</p>
  </body>

CSS

Код
#prokru-kastran {
  height: 6000px;
  width: 1px;
  }

#saytenkastranitsy {
  font-family: Impact;
  font-size: 48px;
  color: #232135;
  background: rgba(212, 210, 210, 0.5);
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 1px 9px 1px 0px rgba(58, 54, 54, 0.26);
  border-radius: 7px;
}

JS

Код
$(document).ready(function() {

  $(window).scroll(function(e){
  var scrollTop = $(window).scrollTop();
  var docHeight = $(document).height();
  var winHeight = $(window).height();
  var scrollPercent = (scrollTop) / (docHeight - winHeight);
  var scrollPercentRounded = Math.round(scrollPercent*100);

  $('#saytenkastranitsy>span').html(scrollPercentRounded);
  repositionLabel();
  });
   
  $(window).resize(function(){
  repositionLabel();
  });

  function repositionLabel() {
  $('#saytenkastranitsy').css({
  position:'fixed',
  left: ($(window).width() - $('#saytenkastranitsy').outerWidth()) / 2,
  top: (($(window).height() - $('#saytenkastranitsy').outerHeight()) / 2) - $('#saytenkastranitsy').height()
  });
  }

  repositionLabel();

  });

Также можете все изначально посмотреть процент прокрутки на экране, используя HTML CSS и JavaScript. Это черновой материал, так как сделан без всякого дизайна.

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

Демонстрация
2019-07-25 Загрузок: 1 Просмотров: 265 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 2019-07-26 12:101
0
Если вам просто нужна плавная прокрутка, чтоб не было не каких процентов, то рекомендую плавную прокрутку страницы на сайте, где поднятие или спуск страницы изменится кардинально и станет намного мягче.
avatar