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

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

Особой  функции она не несёт, но всё же, такая маленькая и совсем не навязчивая  "залипалочка" для посетителей. 

скроллинг


Демонстрация 

Собственные стили прокрутки вы легко сможете задать свои.

Это код

<style>
#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#CD5555;
  color:#fff;
  border-radius:3px;
  font-size:14px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#CD5555;
}</style>
<div id='scroll'></div>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>


Жёлтым цветом я выделила CSS стили для самой кнопки - отступы, общий фон, цвет и размер шрифта. Зелёный - это цвет стрелочки справа.

Создайте свой дизайн и готовый код установите в гаджет HTML/JavaScript, где - нибудь в самом низу макета.

Всё. Спасибо всем за внимание и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


26 комментариев:

  1. Интересная штучка, надо попробовать. Спасибо, Вика!!! А главное - это не надо лезть в шаблон :-)

    ОтветитьУдалить
    Ответы
    1. Елена, да можно и без внедрения в шаблон. Так интересненько.

      Удалить
  2. Необычно, я таких н где не встречала).Здорово, что без копания в шаблоне).

    ОтветитьУдалить
    Ответы
    1. Лера, 2 дня была в отсутствии и не ожидала такого внимания к этой штучке. Вот так бывает.

      Удалить
  3. Необычная штучка. Я сделала сайт по принцпу: чем проще - тем лучше. Но для любителей примочек точно пригодится!

    ОтветитьУдалить
  4. Интересно, Виктория! Но я не любитель таких примочек!

    ОтветитьУдалить
  5. Вика, я не по теме, HTML РЕДАКТОР ДЛЯ ПРОВЕРКИ СКРИПТОВ И КОДОВ не работает, что делать? Где взять другой?

    ОтветитьУдалить
    Ответы
    1. Можно здесь посмотреть https://www.whitepingvin.ru/p/html-editor.html
      если нужен код для своего сайта могу помочь

      Удалить
    2. Виктор,подскажите пожалуйста,где раздобыть код редактора HTML для своего сайта?

      Удалить
    3. Пепа, подождать немного можно . Бывает с ним такое. если не заработает дам тебе другой.

      Удалить
    4. Вика, HTML РЕДАКТОР ДЛЯ ПРОВЕРКИ СКРИПТОВ И КОДОВ не работает. Помоги пожалуйста.

      Удалить
    5. Виктор, принимаю ваше предложение о коде. С установкой у меня все будет хорошо, надеюсь.

      Удалить
    6. Пепа, Вы решили вопрос, код еще нужен?
      Вика Вам предлагала тоже.

      Удалить
    7. Решила, временно, жду Вику, она еще не ответила.

      Удалить
  6. Серафима - есть два варианта редактора, могу скинуть коды, помогу если надо установить.

    ОтветитьУдалить
    Ответы
    1. Виктор, serafimakorf@gmail.com - вот моя почта, скиньте коды пожалуйста.

      Удалить
  7. Ну тут в диалоге, разобрались без меня.

    ОтветитьУдалить
  8. Как всегда, интересно, но не подъёмно для меня.
    Моё недельное молчание объясняется в предисловии к очередному посту.

    ОтветитьУдалить
  9. Пепа напиши мне письмо через форму связи. Скину код другой. смотри у меня на странице редактора.

    ОтветитьУдалить
  10. Пепа, отправила я тебе уже код.

    ОтветитьУдалить
    Ответы
    1. Во какую дискуссию развернули... и всё не по теме поста.😃

      Удалить
  11. Верный друг познается в беде.

    ОтветитьУдалить
  12. Есть поговорка у русских - не так страшен чёрт, как его малюют.

    ОтветитьУдалить
  13. Виктор, бывает у нас и такое. Пишут и здесь, и через форму связи. Темку тоже немного коснулись, хотя она чисто на любителя. Я всем благодарна.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск