При наличии значительного объема контента в материалах сайта веб-мастера используют так называемую "кнопку вверх" (scroll to top). Данная кнопка позволяет моментально пролистать контент к началу страницы, тем самым избавив пользователя от муторной ручной прокрутки.
Работу кнопки "scroll to top" Вы можете лицезреть на данной странице блога Ilyakhasanov.ru.
В качестве самой кнопки используется изображение в формате
HTML код вывода кнопки
Вставка блока
<div id="arrowup"></div>
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 код, реализующий функционал кнопки, размещается либо между тегами
<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 only screen and (max-width: 568px) {
#arrowup {display: none;}
}
Комментарии