Ресурсы, с большим количеством контента на страницах, в основном это могут блоги, журналы или СМИ, могут разместить у себя кнопку наверх для сайта. Данная кнопка, позволяет при скроллинге страницы и при нажатии на нее, подниматься по странице сайта наверх. Данный вариант, по моему мнению, очень удобен для быстрой навигации по сайту и позволяет оставаться эргономичным.
Ведь не нужно теперь пользоваться постоянно скроллом, достаточно нажать кнопку наверх и Вы окажетесь сразу вначале страницы. Конечно, не на всех сайтах нужно использовать данный скрипт, ведь не везде подойдет он под дизайн сайта или возможно, контента может оказаться не достаточно, тогда и смысл, данного скрипта, теряется полностью. По другому можно это назвать и scroll'ом, ведь по сути оно так и есть.
Мы спускаемся по странице вниз, а затем когда нам нужно быстро подняться, нажимаем на кнопку и происходит скроллинг наверх самого сайта.
Вначале, давайте, сразу же подключим стили и js, которые нам пригодятся для дальнейшей работы скрипта. Немного стилей для формирования контента, файл top.js, который будет отвечать за работу кнопки наверх и JQuery библиотеку jquery-latest.min.js.
<link type="text/css" rel="stylesheet" href="css/demo.css"> <script type="text/javascript" src="js/jquery-latest.min.js"></script> <script type="text/javascript" src="js/top.js"></script>
В данном файле, мы просто вставляем между блочным элементом div, любой текст, который нужен нам для скроллинга по странице вниз, тем самым слева появиться кнопка наверх.
<div id="content"> Любой текст... Введите достаточно текста, чтобы посмотреть эффект. </div>
После данного контента, мы создаем тег a href="#", которому придадим класс button. Между открывающим и закрывающим тегом a, создадим тег span, в котором будем хранить символ из html, символизирующий кнопку наверх.
<a href="#" class="button"><span>▲</span></a>
Теперь займемся js-скриптом, который будет взаимодействовать с тегом a и классом button.
Сначала создаем функцию скроллинга и устанавливаем значение кнопке с классом button. Функция scrollTop - получает значение элемента при отступе сверху, допустим от шапки сайта. Функции fadeIn и fadeOut - устанавливают значение прозрачности и время появления элемента. Далее при клике на кнопку, создаем функцию, которая будет отвечать за анимацию и устанавливаем ей значение, равное 300. Ну и в итоге, получаем весь скрипт.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.button').fadeIn(200);
} else {
$('.button').fadeOut(200);
}
});
$('.button').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
Четвертая часть. Файл стилей demo.css.
Последнее, что осталось сделать, так это придать стили для кнопки. Сделаем ее по левому краю и на всю высоту, а также придадим ей цвет фона и цвет текста, как в обычном состоянии, так и при наведении.
.button {
height: 100%;
position: fixed;
bottom: 0px;
left: 0px;
text-decoration: none;
color: #13202c;
background: #f5f5f5;
display: none;
}
.button:hover {
background: #d2d2d2;
}
.button span{
font-size: 30px;
padding: 5px;
color: #282450;
}
В принципе, вот и весь скрипт, которым я хотел с Вами поделиться. Думаю он Вам пришелся по душе и понравился. Если Вас заинтересовала данная тематика, оставляйте свои комментарии и сможем обсудить, то что бы Вы хотели видеть. Большое спасибо всем за внимание, удачи в реализации!