Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Сделаем красивую кнопку вверх для сайта


Сделаем красивую кнопку вверх для сайта

Есть кнопка при клике на нее мышкой мы переходим на самый верх сайта.

Сделаем вначале простую структуру с пустыми секциями, расстояние между секциями 700 пикселей и со второй секции у нас будет появляться кнопка вверх.

Создадим новый див внизу верстки с классом top и иконкой стрелочки вверх шрифта font awesome.

Добавим title=Вверх, чтобы при наведении было пояснение.

Задади стили 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.

Проверим в браузере результат при наведении мышкой и без.

Стили при наведение на иконку вверх

Скрипт для кнопки вверх.

Зайдем в файл 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.

Комментариев нет