Прокрутка страницы вверх
У посетителя сайта, должна быть возможность, быстро вернуться наверх, если он дошел до конца страницы. Обычно в правом нижнем углу браузера, размещается кнопка со стрелочкой вверх. Пользователь нажимает на стрелочку и скрипт перебрасывает его наверх. Сделаем кнопку средствами CSS и запрограммируем её на jQuery.
Кнопка наверх
Вставьте внизу HTML страницы тег button с классом scroll_top.
<button class="scroll_top"></button>
Приступим к стилизации этого тега. Нарисуем фигуру круга, внутри которого при помощи псевдоэлемента after, нарисуем стрелочку.
Как нарисовать стрелочку?
Представьте себе пустой квадрат с цветной обводкой сверху и слева, если его повернуть на 45 градусов, то обводка превратиться в стрелочку вверх.
/* основа кнопки вверх */
.scroll_top {
position: fixed; /* фиксированное положение */
bottom: -50px; /* расстояние от нижнего края */
right: 20px; /* расстояние от правого края */
width: 50px; /* ширина */
height: 50px; /* высота */
border: none; /* без рамки */
border-radius: 50%; /* фигура круга */
background: #ff0000;/* цвет фона */
z-index: 100; /* поверх остальных элементов */
outline: none; /* без внешней обводки */
cursor: pointer;/* курсор рука */
transition: 0.4s; /* плавное движение */
}
/* стрелочка внутри кнопки вверх */
.scroll_top:after {
content: "";
width: 12px;
height: 12px;
border-top: 2px solid #fff; /* верхняя рамка */
border-left: 2px solid #fff; /* левая рамка */
transform: rotate(45deg); /* поворот */
position: absolute; /* положение относительно круга */
top: 7px;
bottom: 0;
left: 0;
right: 0;
margin: auto; /* выравнивание по центру */
}
Программирование кнопки
Кнопка появилась, но при клике по ней ничего не происходит. Нам предстоит написать функцию со следующим алгоритмом действий.
$('.scroll_top').click(function(){
$('html, body').animate({scrollTop: 0}, 1000);
});
Только что написанная нами функция работает, но есть один недостаток. Пользователь сразу видит кнопочку вверх, как только попадает на сайт. Было бы неплохо, показывать ему кнопку, не на первом экране, а ниже, например через 300 пикселей от верха браузера.
Что нужно делать?
bottom: -50px;
/* кнопка появится */
.scroll_top.active {
bottom: 20px;
}
Если окно браузера больше, чем 300 пикселей, то следует добавить элементу scroll_top активный класс, то есть перезаписать его нижнюю позицию (показать кнопку). В противном случае, удалить активный класс (спрятать кнопку).
$(window).scroll(function(){
if($(window).scrollTop() > 300){
$('.scroll_top').addClass('active');
}
else{
$('.scroll_top').removeClass('active');
}
});
Не забудьте подключить библиотеку jQuery.
Заключение
Если вы уже изучили HTML/CSS и не знаете куда двигаться дальше, то рекомендую вам пройти мой видео-курс, без умения программировать хотя бы на jQuery, вы будете вынуждены, отдавать часть заработка какому-нибудь программисту.
-
Создано 15.05.2019 10:49:12
-
Михаил Русаков
Комментарии (1):
Спасибо, Михаил! Реализовал на сайте dawork.ru, созданном по Вашему курсу PHP с Нуля до Гуру.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.