Друзья, доброго времени суток. Для вас сегодня очередная фишка - ползунок или своеобразная полоса прокрутки страницы, на котором будет отображено, в процентном отношении, на каком расстоянии от начала страницы до её конца вы сейчас просматриваете сообщение. Такая вот интересненькая примочка, которую вы наверняка видели на некоторых сайтах.
Особой функции она не несёт, но всё же, такая маленькая и совсем не навязчивая "залипалочка" для посетителей.
Демонстрация
Собственные стили прокрутки вы легко сможете задать свои.
Это код
<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>
#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, где - нибудь в самом низу макета.
Всё. Спасибо всем за внимание и до встречи.
Получайте новые сообщения с блога прямо на почту
Интересная штучка, надо попробовать. Спасибо, Вика!!! А главное - это не надо лезть в шаблон :-)
ОтветитьУдалитьЕлена, да можно и без внедрения в шаблон. Так интересненько.
УдалитьНеобычно, я таких н где не встречала).Здорово, что без копания в шаблоне).
ОтветитьУдалитьЛера, 2 дня была в отсутствии и не ожидала такого внимания к этой штучке. Вот так бывает.
УдалитьНеобычная штучка. Я сделала сайт по принцпу: чем проще - тем лучше. Но для любителей примочек точно пригодится!
ОтветитьУдалитьИнтересно, Виктория! Но я не любитель таких примочек!
ОтветитьУдалитьДевчата, всё на любителя.
УдалитьВика, я не по теме, HTML РЕДАКТОР ДЛЯ ПРОВЕРКИ СКРИПТОВ И КОДОВ не работает, что делать? Где взять другой?
ОтветитьУдалитьМожно здесь посмотреть https://www.whitepingvin.ru/p/html-editor.html
Удалитьесли нужен код для своего сайта могу помочь
Виктор,подскажите пожалуйста,где раздобыть код редактора HTML для своего сайта?
УдалитьПепа, подождать немного можно . Бывает с ним такое. если не заработает дам тебе другой.
УдалитьВика, HTML РЕДАКТОР ДЛЯ ПРОВЕРКИ СКРИПТОВ И КОДОВ не работает. Помоги пожалуйста.
УдалитьВиктор, принимаю ваше предложение о коде. С установкой у меня все будет хорошо, надеюсь.
УдалитьПепа, Вы решили вопрос, код еще нужен?
УдалитьВика Вам предлагала тоже.
Решила, временно, жду Вику, она еще не ответила.
УдалитьСерафима - есть два варианта редактора, могу скинуть коды, помогу если надо установить.
ОтветитьУдалитьВиктор, serafimakorf@gmail.com - вот моя почта, скиньте коды пожалуйста.
УдалитьСерафима - отправил...
ОтветитьУдалитьНу тут в диалоге, разобрались без меня.
ОтветитьУдалитьКак всегда, интересно, но не подъёмно для меня.
ОтветитьУдалитьМоё недельное молчание объясняется в предисловии к очередному посту.
Пепа напиши мне письмо через форму связи. Скину код другой. смотри у меня на странице редактора.
ОтветитьУдалитьПепа, отправила я тебе уже код.
ОтветитьУдалитьВо какую дискуссию развернули... и всё не по теме поста.😃
УдалитьВерный друг познается в беде.
ОтветитьУдалитьЕсть поговорка у русских - не так страшен чёрт, как его малюют.
ОтветитьУдалитьВиктор, бывает у нас и такое. Пишут и здесь, и через форму связи. Темку тоже немного коснулись, хотя она чисто на любителя. Я всем благодарна.
ОтветитьУдалитьВик ,приветик! и %по прокрутке тоже у меня не работают, как и цвет самой прокрутки.(http://www.shpargalochki.ru/2018/08/stili-dlya-polosy-prokrutki.html?showComment=1569834135526#c8789758098054411455) Вроде бы все сделала так как написано у тебя. Но.. видимо не с моими мозгами....
ОтветитьУдалитьИрина, ты куда коды вставляешь.
ОтветитьУдалитьПо поводу штучки с % в яваскрипт и вниз самый- как написано. Цвет - ты уже увидела в шаблон в теме.
ОтветитьУдалитьИрина, вот по поводу с процентами тоже та же может быть проблема. С браузером. А какой лучше сама не могу точно сказать - кто - то в Опера работает, кто в в хром. У меня несколько месяцев назад был знакомый компьютерщик полностью ноут чистил, обновлял винду и посоветовал на Яндекс браузер перейти. Установил. Так что у меня сейчас 2 - хочу через хром, а так в Яндексе работаю.
ОтветитьУдалитьНУ Я ТОЖЕ ТАК СДЕЛАЛА УЖЕ. Ползунок увидела и настроила. Красота!!!! А вот процентики не хотят и там. "ЩАС" попробую переустановить % заново на яндексе! Вик, Большое Мерси тебе, моя хорошая!!!!
ОтветитьУдалитьПопробуй, установи. Может быть проблема с джаваскрипт.
ОтветитьУдалить