Кнопка наверх для сайта
Кнопка «Наверх» плавно прокручивает страницу на самый верх. Этот небольшой плагин улучшает опыт взаимодействия с длинными страницами. Кнопка «Наверх» появляется с правой стороны сайта, когда мы прокручиваем окно вниз и переходим определенную точку.
Создаем структуру
Расположим код кнопки в самом низу страницы.
1 2 3 4 5 6 7 | <body> <!-- Весь контент страницы --> <a href="#0" class="cd-top">Top</a> <!-- Ссылки на скрипты --> </body> |
Добавим стили
Кнопка появляется и фиксируется с правой стороны. Изначально она имеет видимость visibility:hidden и прозрачность opacity:0; . Оба свойства контролируются двумя классами: .cd-is-visible и .cd-fade-out .
.cd-top.cd-is-visible { /* кнопка становится видимой */ visibility: visible; opacity: 1;}.cd-top.cd-fade-out { /* Если пользователь продолжает скроллить страницу вниз, кнопка становится полупрозрачной */ opacity: .5;}
Эти классы добавляются и удаляются с помощью jQuery.
Обработка событий
В нашем скрипте .js мы объявили три переменных, которые задают, когда появляется кнопка и скорость анимации:
/
1 2 3 4 5 6 | /высота окна в пикселях, через которое кнопка появляется var offset = 300, //высота окна в пикселях, когда кнопка становится полупрозрачной offset_opacity = 1200, //длительность анимации scroll_top_duration = 700; |
Переменная offset используется для переключения класса .cd-is-visible ; offset_opacity для добавления класса .cd-fade-out . Функция прокрутки наверх реализована с помощью метода jQuery .animate() и и срабатывает на событие click.