При наличии значительного объема контента в материалах сайта веб-мастера используют так называемую "кнопку вверх" (scroll to top). Данная кнопка позволяет моментально пролистать контент к началу страницы, тем самым избавив пользователя от муторной ручной прокрутки.
Работу кнопки "scroll to top" Вы можете лицезреть на данной странице блога Ilyakhasanov.ru.
В качестве самой кнопки используется изображение в формате png, именно поэтому для начала следует подыскать для себя нужный вариант картинки. Для этого подойдет качественный сервис иконок iconfinder.
Найти картинку для кнопки
HTML код вывода кнопки
Вставка блока div с идентивикатором arrowup осуществляется между тегами <body>...</body> исполняемого файла шаблона (обычно это файл index.php). В шаблонах студии Yootheme это файл theme.php, который находится в папке "layouts".
<div id="arrowup"></div>
CSS стили оформления кнопки
Код CSS стилей кнопки, который прикреплен к классу arrowup, размещается в любом подключенном к шаблону CSS файле. Обычно используется файл style.css, который размещается в папке "css".
#arrowup {
position: fixed;
right: 30px; /*позиция кнопки: отступ справа*/
bottom: 30px; /*позиция кнопки: отступ снизу*/
background: url(/images/arrowup.png); /*путь к изображению кнопки*/
width: 48px; /*размер кнопки по ширине*/
height: 48px; /*размер кнопки по высоте*/
cursor: pointer;
display: none;
opacity: 0.8; /*уровень прозрачности в статике*/
}
#arrowup:hover {
opacity: 1; /*уровень прозрачности при наведении*/
}
JS код для работы кнопки
JavaScript код, реализующий функционал кнопки, размещается либо между тегами <head>...</head> исполняемого файла шаблона (index.php), либо перед закрывающим тегом </body>.
<script type="text/javascript">$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('#arrowup').fadeIn(300); //скорость исчезновения кнопки
} else {
$('#arrowup').fadeOut(200); //скорость появления кнопки
}
});
$('#arrowup').click(function() {
$('body,html').animate({
scrollTop: 0
}, 200); //скорость прокрутки
return false;
});});
</script>
Как скрыть "кнопку вверх" на мобильных устройствах
Многие веб-мастера скрывают "кнопку вверх" при отображении сайта на мобильных устройствах из-за её ненадобности. Для скрытия кнопки "scroll to top" в мобильных устройствах используется css медиа запрос @media (прописывается все в том же css файле style.css):
@media only screen and (max-width: 568px) {
#arrowup {display: none;}
}
Комментарии