Сентябрь 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.

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

Комментарии запрещены