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

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

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

скроллинг


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

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

Это код

<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


32 комментария:

  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. Виктор, бывает у нас и такое. Пишут и здесь, и через форму связи. Темку тоже немного коснулись, хотя она чисто на любителя. Я всем благодарна.

    ОтветитьУдалить
  14. Вик ,приветик! и %по прокрутке тоже у меня не работают, как и цвет самой прокрутки.(http://www.shpargalochki.ru/2018/08/stili-dlya-polosy-prokrutki.html?showComment=1569834135526#c8789758098054411455) Вроде бы все сделала так как написано у тебя. Но.. видимо не с моими мозгами....

    ОтветитьУдалить
  15. Ирина, ты куда коды вставляешь.

    ОтветитьУдалить
  16. По поводу штучки с % в яваскрипт и вниз самый- как написано. Цвет - ты уже увидела в шаблон в теме.

    ОтветитьУдалить
  17. Ирина, вот по поводу с процентами тоже та же может быть проблема. С браузером. А какой лучше сама не могу точно сказать - кто - то в Опера работает, кто в в хром. У меня несколько месяцев назад был знакомый компьютерщик полностью ноут чистил, обновлял винду и посоветовал на Яндекс браузер перейти. Установил. Так что у меня сейчас 2 - хочу через хром, а так в Яндексе работаю.

    ОтветитьУдалить
  18. НУ Я ТОЖЕ ТАК СДЕЛАЛА УЖЕ. Ползунок увидела и настроила. Красота!!!! А вот процентики не хотят и там. "ЩАС" попробую переустановить % заново на яндексе! Вик, Большое Мерси тебе, моя хорошая!!!!

    ОтветитьУдалить
  19. Попробуй, установи. Может быть проблема с джаваскрипт.

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

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

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