Блог о веб-разработке > Javascript > Кнопка наверх для сайта

Кнопка наверх для сайта

Кнопка «Наверх» плавно прокручивает страницу на самый верх. Этот небольшой плагин улучшает опыт взаимодействия с длинными страницами. Кнопка «Наверх» появляется с правой стороны сайта, когда мы прокручиваем окно вниз и переходим определенную точку.

Демо

Создаем структуру

Расположим код кнопки в самом низу страницы.

<body>
	<!-- Весь контент страницы -->
 
	<a href="#0" class="cd-top">Top</a>
 
	<!-- Ссылки на скрипты -->
</body>

<body>

</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 мы объявили три переменных, которые задают, когда появляется кнопка и скорость анимации:
/

/высота окна в пикселях, через которое кнопка появляется
var offset = 300,
	//высота окна в пикселях, когда кнопка становится полупрозрачной 
	offset_opacity = 1200,
	//длительность анимации
	scroll_top_duration = 700;

/высота окна в пикселях, через которое кнопка появляется

var offset = 300,

//высота окна в пикселях, когда кнопка становится полупрозрачной

offset_opacity = 1200,

//длительность анимации

scroll_top_duration = 700;

Переменная offset используется для переключения класса .cd-is-visible ; offset_opacity для добавления класса .cd-fade-out . Функция прокрутки наверх реализована с помощью метода jQuery .animate() и и срабатывает на событие click.