Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.
Этот ресурс подходит для сайта с большим количеством контента страницы. Ссылка исчезает с правой стороны области содержимого после того, как окно браузера прокручено за определенную точку и остается фиксированным во время прокрутки.
Если пользователи продолжают прокручивать, кнопка красиво уменьшает непрозрачность, чтобы быть менее отвлекающим во время навигации.
Создание структуры
Мы вставили ссылку «К началу» в конце нашего контента перед закрывающим тегом.
<body>
<!-- all your content here -->
<a href="#0" class="cd-top">Top</a>
<!-- link to scripts here -->
</body>
Добавление стиля
Ссылка будет отображаться на правой стороне содержимого. Первоначально он имеет visibility:hidden; и opacity:0;.
Управление видимостью и непрозрачностью осуществляется через два класса: .cd-is-visible и .cd-fade-out.
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}Эти классы добавляются (или удаляются) в ссылку «Back to top» с помощью jQuery.
Обработка событий
В нашем .js-файле мы определили три переменные для управления видом ссылки «Back to top»:
//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700;Переменная offset будет использоваться для переключения класса .cd-is-visible; вместо offset_opacity добавьте класс .cd-fade-out.
Функция верхней прокрутки реализована с использованием метода jQuery .animate () и привязана к событию «Back to top».
