Эта фишка будет хороша для статейников, сайтов с блогами и сайтов с большими страницами. Пользователь может видеть процент от прочитанной информации и по необходимости вернуться к началу страницы.
Для добавления якоря с прогресс баром нужно:
- Подключить библиотеку jQuery.
- Скачать и подключить плагин knob.js.
- Вывести HTML часть якоря, добавить к нему стили и привязать скрипт.
Как подключить библиотеку jQuery
Есть несколько способов подключить библиотеку jQuery: скачать файл в папку или подключить напрямую.
Рассмотрим второй вариант.
Для подключения рекомендую использоваться подключение от Google Developers. Наша задача скопировать строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
и вставить эту строчку перед закрывающимся тегом </head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
</body>
</body>
</html>
Как скачать плагин и добавить его на сайт
Скрипт плагина можно скачать тут
Добавьте файл в Вашу папку со скриптами и подключите его, добавлением строки после подключения библиотеки jQuery.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/js/knob.js"></script>
</head>
<body>
</body>
</html>
Добавляем якорь и привязываем к нему скрипт
Теперь нужно добавить html код нашей кнопки, которая будет прокручивать экран вверх, стилизовать с помощью css и прикрутить скрипт
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/js/knob.js"></script
<link rel="stylesheet" href="/css/style.css" media="all"/>
</head>
<body>
<div class="progress-bar">
<input type="text" class="dial" readonly="readonly" style="display: none; width: 0px; visibility: hidden;">
<a href="#" class="btn-top" title="Вверх"> <i class="fa fa-angle-up" aria-hidden="true"> </i> </a> // Тут для значка кнопки мы используем стрелку вверх из шрифтов fontawesom, вы также можете использовать изображения или символы
</div>
<script>
var offset = 100,
scroll_top_duration = 700,
$back_to_top = jQuery('.btn-top'),
$thedial = jQuery('.dial'),
$progress_bar = jQuery('.progress-bar');
$thedial.knob({
'min' : 0, // минимальное значение прогресс бара (минимум 0)
'max' : 100, // максимальное значение прогресс бара (максимум 100)
'width' : 50, // ширина элемента
'height' : 50, // высота элемента
'fgColor' : '#f06317', // цвет бара
'skin' : 'tron',
'thickness' : .1, // ширина линии
'displayInput' : false, // отображать поле
'displayPreview' : false, // отображать значение
'readOnly' : true // только для чтения
});
jQuery(window).scroll(function(){
( jQuery(this).scrollTop() > offset ) ? $progress_bar.addClass('is-visible') : $progress_bar.removeClass('is-visible'); // добавление класса к кнопке при прокрутке страницы для её появления
var s = jQuery(window).scrollTop(), // высота от верхней части
d = jQuery(document).height(), // переменная для высоты html документа
c = jQuery(window).height(); // высота экрана пользователя
scrollPercent = (s / (d-c)) * 100; // расчет прогресс бара
jQuery('.dial').val(scrollPercent).change();
});
// событие на нажатие кнопки
$back_to_top.on('click', function(e){
e.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
;);
});
</script>
</body>
</html>
Добавим CSS код в файл стилей
.btn-top{
font-size: 40px;
height: 60px;
width: 60px;
line-height: 60px;
position: fixed;
left: 25px;
bottom: 28px;
color: #f06317 !important;
text-align: center;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
.icon-angle-up:before {
content: "⟩";
}
.progress-bar {
background: transparent;
width: 50px;
border-radius: 50%;
height: 50px;
position: fixed;
bottom: 30px;
left: 30px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
z-index: 9999;
border: none;
box-shadow: none !important;
}
.is-visible {
visibility: visible;
opacity: 1;
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}
