Есть кнопка при клике на нее мышкой мы переходим на самый верх сайта.
Сделаем вначале простую структуру с пустыми секциями, расстояние между секциями 700 пикселей и со второй секции у нас будет появляться кнопка вверх.
Создадим новый див внизу верстки с классом top и иконкой стрелочки вверх шрифта font awesome.
Добавим title=Вверх, чтобы при наведении было пояснение.
|
1 2 3 4 5 6 |
<section><h2 class='h2'>Секция1</h2></section> <section><h2 class='h2'>Секция2</h2></section> <section><h2 class='h2'>Секция3</h2></section> <section><h2 class='h2'>Секция4</h2></section> <div class="top" title='Вверх'><i class="fa fa-arrow-up" aria-hidden="true"></i> </div> |
Задади стили css в main.sass.
Позицию сделаем фиксированной position: fixed, сделаем иконку снизу bottom: 30px.
Справа сделаем большой отступ, чтобы ее не было видно right: -100px.
Цвет будет серый фона. Чтобы иконка была сверху всегда делаем z-index: 11.
Иконка будет в круглом фоне с радиусом border-radius: 10em и размерами 50 пикселей.
Сама иконка стрелочки будет темной, с шрифтом 30 пикселей.
Для центрирования иконки стрелочки по горизонтали мы используем text-align: center, для вертикали line-height: 50px.
При наведение на иконку у нас должен меняться курсор cursor: pointer, теперь меняется курсор и подсвечивается надпись вверх.
Добавим анимацию всем свойствам transition: all .5s ease и зададим непрозрачность opacity: .5.
Стили при наведение на иконку вверх.
Теперь зададим свойства при наведении мышкой &:hover.
Цвет иконки будет белой, а фон сделаем серым.
Прозрачность не будет.
Чтобы кнопка появлялась плавно справа, когда прокрутили первый экран.
Зададим свойство &.active, когда кнопка станет активной ее положение станет right: 30px.
Для этого напишем скрипт.
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.h2 height: 700px border-bottom: 1px solid #000 .top position: fixed bottom: 30px right: -100px background-color: #c3c3c3 z-index: 11 border-radius: 10em color: #000 font-size: 30px width: 50px height: 50px text-align: center line-height: 50px cursor: pointer transition: all .5s ease opacity: .5 &:hover color: #fff background-color: #555 &.active right: 30px |
Проверим в браузере результат при наведении мышкой и без.
Скрипт для кнопки вверх.
Зайдем в файл common.js и напишем $(window).scroll с функцие.
Если мы пролистали высоту экрана мы должны отобразить кнопку вверх это будет условие if ($(this).scrollTop () > $(this).height ()), тогда мы добавим active классу top $(.top).addClass (active).
Теперь делаем наоборот поднимаем вверх страницу это условие иначе else, мы у класса top забираем active, запишем $(.top).removeClass (active).
Проверяем теперь при скролле экрана выезжает кнопка справа, но при клике мышкой на нее ничего не произойдет.
Делаем функцию плавного подъема вверх после нажатия на кнопку $(.top).click.
При клике мы берем родительские классы $(html, body) и анимируем их предварительно выполнив служебную функцию стоп stop ().animate, если будет другая анимация она остановится это стандартные функции jquery.
После скроллим вверх scrollTop: 0, с параметрами медленно slow, swing.
Проверяем и видим, что сайт переходит на вверх.
Код в common.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { $(window).scroll(function() { if ($(this).scrollTop() > $(this).height()) { $('.top').addClass('active'); } else { $('.top').removeClass('active'); } }); $('.top').click(function(){ $('html, body').stop().animate({scrollTop: 0}, 'slow', 'swing'); }); }); |