Jquery плавная прокрутка по клику. Плавный скролл к элементу — jQuery
За последние несколько лет серьезно возросла популярность одностраничных (скроллинговых) сайтов. Хотя данный вид сайтов и не для всех, все же полезно знать, как они работают. Сегодня я покажу, как создать простой одностраничный (скроллинговый) сайт с помощью jQuery.
Прежде чем мы начнем, можете посмотреть Demo.
Что ж, приступим…
Создавать будем следующее:
HTMLРазметка (HTML) страницы будет предельно проста.
Сперва создадим навигацию.
- Paragraph 1
- Paragraph 2
- Paragraph 3
- Paragraph 4
- Paragraph 5
Что мы сделали: элемент nav имеет ширину 100% , то есть его ширина будет равна ширине родительского элемента. Для nav свойство position имеет значение fixed , поэтому при скроллинге страницы элемент nav будет всегда перед глазами пользователя. Чтобы создать навигацию мы в тег nav поместили тег ul .
Преимущества:
Теперь, когда мы создали простую навигационную панель, можем заняться главным контентом страницы.
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
In ut sapien sem, a convallis odio. Aenean consequat ornare egestas...
Donec sodales diam et libero ultrices ornare...
Phasellus dolor sem, pharetra nec scelerisque sit amet, consequat quis dolor...
Proin varius pellentesque velit, at consequat risus hendrerit quis...
Как видите, разметка предельно проста. Она состоит из блока content , который вмещает параграфы (p). Каждый параграф имеет свой id , связанный со ссылкой в нашей навигации.
CSSПрежде чем приступить к CSS, не забудьте подключить . Он нивелирует проблемы, связанные с межбраузерной несовместимостью, и позволяет работать не задумываясь, будет ли сайт выглядеть одинаково во всех современных браузерах.
Начнем со стилей главного контента страницы, что очень просто.
Body { font-family: arial; font-size: 15px; line-height: 25px; color: #515151; background: #fdfdfd; } #content { width: 500px; margin: 0 auto; padding-top: 40px; height: 2000px; } #content p { margin-bottom: 25px; }
В body определяем текст и цвета фона; блок content имеет ширину 500px и центрирован. Значение для padding-top у блока content равно 40рх – это сделано для того, чтобы навигация не блокировала верхние 40px контента. Высота равна 2000px , чтобы уместить контент и показать скроллинг. Хотя, как правило, в этом нет необходимости. Каждый параграф имеет свойство margin-bottom , равное 25px , чтобы можно было понять, где один параграф заканчивается и начинается другой.
Теперь перейдем к навигации:
Nav { width: 100%; position: fixed; height: 40px; background: white; border: 1px solid #CACACA; border-top: none; -webkit-box-shadow: 0px 0px 3px 1px #ebebeb; -moz-box-shadow: 0px 0px 3px 1px #ebebeb; box-shadow: 0px 0px 3px 1px #ebebeb; } nav ul { width: 750px; margin: 0 auto; } nav ul li{ float: left; width: 150px; text-align: center; } nav ul li a { line-height: 40px; font-size: 16px; text-decoration: none; color: #515151; border-bottom: 1px dotted #515151; } nav ul li a:hover{ color: #000; }
Чтобы nav занимал всю ширину браузера, значение его ширины равно 100% . Чтобы nav оставался на экране монитора при скроллинге, он имеет объявление position:fixed . Высота равна 40рх, что вполне нормально для горизонтального верхнего меню. Для придания симпатичного вида был использован простой стиль. ul центрировано и имеет ширину 750рх, чтобы у каждой ссылке было достаточно места. Каждая li создана плавающей, поэтому все ссылки находятся на одной линии. Наконец, для ссылок также назначен простой стиль.
jQueryВот, как это будет работать: при клике (click) по навигационной ссылке произойдет скроллинг к тому параграфу, на который указывает ссылка.
Как всегда, начнем с функции document.ready
$(document).ready(function(){ });
Теперь, прежде чем перейти к функцию click , напишем функцию scrollToDiv , которая будет осуществлять скроллинг к выбранному нами блоку. Параметров будет 2 – элемент, к котрому ведется скроллирование и высота навигацинной панели в верхней части страницы.
Function scrollToDiv(element,navheight){ }
Теперь мы описываем три переменные, они нам понадобятся для аккуратного скроллинга.
Function scrollToDiv(element,navheight){ var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; }
Переменная offset это смещение элемента. Ее использует переменная offsetTop , чтобы вытащить значение top . В результате чего получаем расстояние от верха страницы до элемента. Переменная totalScroll отвечает за расстояние, на которое браузеру необходимо прокрутить страницу. Без верхней панели навигации величина скроллирования будет равна величине offsetTop . Однако при вычислении переменной totalScroll нужно помнить, что наша навигационная панель блокирует верхние 40рх контента. Здесь нам поможет параметр navheight .
Наконец, скроллируем страницу:
$("body,html").animate({ scrollTop: totalScroll }, 500);
Функция jQuery animate позволит нам реализовать плавный скроллинг к нужному нам месту страницы. В данном случае на анимацию уходит 500 миллисекунд.
Свойство scrollTop позволяет задать величину, на которую необходимо прокрутить страницу (по вертикали).
Вот полная функция scrollToDiv:
Function scrollToDiv(element,navheight){ var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; $("body,html").animate({ scrollTop: totalScroll }, 500); }
Перейдем к функции click .
$("nav ul li a").click(function(){ return false; });
Это только каркас функции click . Объявлением return false на конце, предотвратит переход браузера по ссылке.
Прежде чем передать элемент функции, для него нужно найти имя.
Var el = $(this).attr("href"); var elWrapped = $(el);
Переменная el содержит значение атрибута href . Чтобы jQuery могла использовать переменную el , ее необходимо завернуть в elWrapped . Следующий код jQuery исполнить не может:
#paragraph1.offset();
Но может исполнить это:
$("#paragraph1").offset();
Вот, почему необходима переменная elWrapped .
Полная функция click:
$("nav ul li a").click(function(){ var el = $(this).attr("href"); var elWrapped = $(el); scrollToDiv(elWrapped,40); return false; });
Вот и все – теперь у нас есть простая страница с ссылками, при клике по которым происходит скроллинг к нужной части страницы .
Привет, друзья. В этой статье мы с вами разберем jQuery событие при прокрутке страницы до определенного элемента. Если говорить другими словами, то . В этом примере мы вызовем событие, когда страница будет прокручена до футера. Тогда будем выводить небольшое всплывающее окно с плавным появлением. А так же будем закрывать его по клику. Что в него поместить, решайте сами, вариантов масса. Вот как это выглядит:
Начнем, пожалуй с HTML разметки и здесь нет ничего необычного. Все довольно просто и понятно. Большое полотно текста, внизу футер и блок с кнопкой, который будет появляться. Вот код блока:
| 1 2 3 4 5 6 7 8 9 10 | Здесь много контента... Какой-то текст. Footer |
Здесь много контента... Какой-то текст. Footer
Теперь займемся оформлением нашего скрытого блока и его кнопки:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #block { display : none ; position : fixed ; top : 15px ; right : 15px ; color : #fff ; background : #4CAF50 ; padding : 10px ; border-radius : 5px ; width : 200px ; box-shadow : 0 13px 20px -5px #3a3a3a ; font-family : Arial; text-align : center ; } .btn{ background : #FF9800 ; border : 2px solid #795548 ; color : #fff ; border-radius : 5px ; cursor : pointer ; padding : 5px 10px ; margin-top : 10px ; font-weight : bold ; } |
#block{ display: none; position: fixed; top: 15px; right: 15px; color: #fff; background: #4CAF50; padding: 10px; border-radius: 5px; width: 200px; box-shadow: 0 13px 20px -5px #3a3a3a; font-family: Arial; text-align: center; } .btn{ background: #FF9800; border: 2px solid #795548; color: #fff; border-radius: 5px; cursor: pointer; padding: 5px 10px; margin-top: 10px; font-weight: bold; }
Теперь займемся непосредственно, что называется scroll to element. Все-таки английский язык для разработчика необходим. Стандартно подключаем jQuery. Я сделаю это через CDN, так как это будет самая актуальная версия.
А затем сам код скрипта, который и будет творить магию на странице:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(document) .ready (function () { var $element = $(".footer" ) ; let counter = 0 ; $(window) .scroll (function () { var scroll = $(window) .scrollTop () + $(window) .height () ; //Если скролл до конца елемента //var offset = $element.offset().top + $element.height(); //Если скролл до начала елемента var offset = $element.offset () .top if (scroll > offset && counter == 0 ) { $("#block" ) .fadeIn (500 ) ; counter = 1 ; } } ) ; $(".btn" ) .click (function () { $("#block" ) .slideUp () ; } ) ; } ) ; |
$(document).ready(function(){ var $element = $(".footer"); let counter = 0; $(window).scroll(function() { var scroll = $(window).scrollTop() + $(window).height(); //Если скролл до конца елемента //var offset = $element.offset().top + $element.height(); //Если скролл до начала елемента var offset = $element.offset().top if (scroll > offset && counter == 0) { $("#block").fadeIn(500); counter = 1; } }); $(".btn").click(function(){ $("#block").slideUp(); }); });
По умолчанию событие срабатывает, как только начало элемента, в данном случае футера, появляется в зоне видимости, но можно поменять значение, раскомментировав 7 строку и тогда функция сработает, когда прокрутка дойдет до конца элемента.
Вот таким хитрым способом можно показывать посетителям сайта ваше уникальное предложение и добавив в метрике цели, отслеживать его конверсию.
Представляю огромный список плагинов прокрутки на jQuery для вашего сайта. Различные трюки с прокруткой пришли к нам из-за рубежа не так давно и оцепили ряд современных порталов и сайтов, которые хотели выделиться. Работа над вертикальной прокруткой вполне может повысить конверсию и несомненно впечатление пользователя. Благодаря интересным подходам JS + CSS3 Вы можете улучшить интерфейс своего сайта. Если добавить немного фантазии, то можно из любого плагина получить что-то уникальное для своего сайта. Ведь каждый сайт старается выделиться из серой массы разными способами. Благодаря прокрутке, можно некоторые страницы перенести на страницу, с реализованным плагином, что улучшит получение важной информации пользователем. Данная технология лучше всего подойдет для различных портфолио или же демонстрации какого-либо продукта и т.д.
Переходим непосредственно к делу.
SlySly — это библиотека JavaScript для расширенной однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену прокрутки, так и инструмент навигации, или как отличный интерфейс навигации и анимации для сайтов параллакса.
jQuery Scroll Path
Это плагин для определения пользовательских путей прокрутки.
windows
AnimateScroll — это плагин jQuery, который позволяет вам прокручивать на любую часть страницы, просто вызывая функцию animatescroll () с идентификатором или классом элемента, на который вы хотите перейти.
ScrollMe
По мере прокрутки страницы ScrollMe может масштабировать, поворачивать, переводить и изменять прозрачность элементов на странице. Его легко настроить, и не требуется ни одна строка javascript.
stickUp
Простой плагин, который «прикрепляет» элемент к верхней части окна браузера, прокручивая его, всегда сохраняя его в поле зрения. Этот плагин работает на многостраничных сайтах, но имеет дополнительные возможности для макетов с одним пейджером.
Block Scroll
Block Scroll — это плагин jQuery, который превращает набор элементов в блоки и отображает их по одному экрану за раз. Идея состоит в том, чтобы разбить вашу страницу на куски для лучшего представления и потока пользователей. Блокировка прокрутки автоматически изменяет вашу страницу.
Starscroll
Создайте div в качестве фона … активируйте плагин; анимация при прокрутке. Плагин автоматически установит div, чтобы он работал невидимым.
Scrolldeck
Scrollocue — это плагин jQuery для создания простой системы autocue / teleprompter для прокрутки строк текста.
scrollorama
Stellar.js — это плагин jQuery, который обеспечивает эффекты прокрутки параллакса для любого элемента прокрутки.
Super scroll orama
Плагин jQuery, который помогает прокручивать и привязывать к разделам. Совместим с Touch.
vivus.js
Vivus — это легкий класс JavaScript (без зависимостей), который позволяет вам анимировать SVG, давая им возможность рисования.
jQuery slimScroll
slimScroll — небольшой (4.6KB) плагин jQuery, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки.
jQRangeSlider
Вы когда-нибудь хотели прикрепить что-то к стороне текста? Вам когда-нибудь был нужен тонкий липкий элемент, который бы спокойно был закреплен, пока вы прокручиваете вниз?
jQuery.Pin здесь, чтобы помочь! Вставьте любой элемент в верхнюю часть контейнера. Легко отключите его для меньших размеров экрана, где нет места для такого рода махинаций.
Infinite AJAX Scroll
Overscroll — это плагин jQuery и polyfill для стиля прокрутки Safari mobile. Он предназначен для использования в настольных браузерах с последней версией jQuery.
jQuery.localScroll
JQuery и совместимый с amd плагин для создания эффекта параллакса, как показано на сайте spotify.com.
fullPage.js
Легкий и простой в использовании плагин для создания полноэкранных прокручивающихся веб-сайтов (также известных как веб-сайты одной страницы, landing page), также можно добавлять некоторые горизонтальные слайдеры внутри разделов сайта.
Parallax.js
Jarallax — это библиотека JavaScript с открытым исходным кодом, которая упрощает настройку css на основе взаимодействия. С Jarallax легко создать веб-сайт с прокруткой параллаксом
jInvertScroll
JQuery Full Content позволяет полностью создавать веб-сайты.
jQuery One Page Scroll
Создайте веб-сайт со скроллингом на одной странице (веб-сайт iPhone 5S) с плагином прокрутки одной страницы.
jQuery Parallax Plugin
jQuery Parallax — это сценарий, который имитирует эффект параллакса, как показано на nikebetterworld.com.
jquery.parallax.js
Portfoliojs — это легкий плагин галереи jQuery для ваших красивых изображений с горизонтальной прокруткой, который поддерживает настольные, планшетные и мобильные браузеры.
Scrolling Parallax Plugin
Scrolling Parallax — новый плагин jQuery, который связывает эффект параллакса с полосами прокрутки и колесиком мыши. Это позволяет фоновому изображению или чему-либо еще прокручиваться в разном темпе, чем веб-страница, когда пользователь прокручивает. Эффект параллакса, который является результатом, — это простой способ создать иллюзию глубины на вашем веб-сайте.
Scrolltab
Отдельная библиотека прокрутки параллакса для мобильных устройств (Android + iOS) и пк. Нет jQuery. Просто обычный JavaScript (и некоторая магия).
SMINT
Smint — это простой плагин jQuery, который помогает при навигации на веб-сайтах с одной страницей.
jQuery custom content scroller
Детально настраиваемый пользовательский плагин jQuery для прокрутки. Особенности включают в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесо мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного экрана, готовые к использованию темы и настройку с помощью CSS, поддержку направления RTL, параметры опций для полного управление функциями прокрутки, методы запуска таких действий, как прокрутка, обновление, уничтожение и т. д.
ScrollUpBar Plugin
Плагин прокрутки вверх (jQuery) скрывает верхнюю панель при прокрутке вниз и показывает ее при прокрутке вверх. Это особенно полезно на мобильных интерфейсах, чтобы сэкономить драгоценное пространство.
StickyTableHeaders
Плагин jquery waterfall , такой как Pinterest, huaban.com, faxianla.com
Scroller
jScroll — это плагин jQuery для бесконечной прокрутки, написанный Филиппом Клаузинским. Бесконечная прокрутка; также известная как ленивая загрузка, бесконечная прокрутка, автопир, бесконечные страницы и т. д.
FoldScroll
ScrollUp — это легкий плагин jQuery для создания настраиваемой функции «Прокрутка вверх», которая будет работать с любым веб-сайтом с легкостью.
multiScroll.js
Создавайте разделенные страницы с двумя вертикальными панелями прокрутки. Совместимость с мобильными телефонами и устройствами и старыми баузерами, такими как IE 8.
Any List Scroller
qpScroll — это плагин jQuery, который создает фон параллакса для любой страницы или div. Его очень легко настроить. Он может быть добавлен на любую существующую страницу без необходимости изменения маркировки HTML.
jQuery Stick ’em
Parallax Engine реагирует на ориентацию смарт-устройства. Там, где нет оборудования для обнаружения гироскопа или обнаружения движения, вместо этого используется позиция курсора.
Slinky.js
Slinky.js — это плагин jQuery для создания красивых списков навигации для прокрутки с заголовками штабелирования.
Infinity.js
Infinity.js — это UITableView для Интернета: он ускоряет прокрутку по длинным спискам и сохраняет ваши бесконечные каналы бесперебойными и стабильными для ваших пользователей. Он небольшой, проверенный временем и высокоэффективный.
Arbitrary Anchor
Waypoints — это библиотека, которая упрощает выполнение функции всякий раз, когда вы переходите к элементу.
jQuery.kinetic
Есть два компонента этого эффекта. Содержание и бары. Каждый раздел содержимого имеет идентификатор, который помогает вычислять процент. Каждый бар имеет ссылку, чтобы сгладить прокрутку к этому разделу.
jQuery Smooth Div Scroll
Smooth Div Scroll — это плагин jQuery, который прокручивает содержимое по горизонтали влево или вправо.
jQuery Story Tale
Простой плагин jQuery, расширяющий плагин animateScroll с возможностями одиночной страницы.
jQuery Animation Scroll Plugin
Бесконечная прокрутка (или infinite scrolling) является популярным методом среди веб-сайтов 2.0, таких как Google Reader и Live Image Search, где вместо подкачки через элементы, используя традиционную технику разбиения на страницы, страница просто продолжает загружать новые элементы, прикрепленные к концу.
В последнее время бешеной популярностью пользуются типы сайтов под названием Landing Page - или "лендинги". Они удобны тем, что пользователь получает всю необходимую информацию на одной странице. Чаще всего это информация о товаре, которая описывает его со всех сторон, дает понять сильные стороны и преимущества и конечно же оформить заказ.
Такие сайты получаются довольно длинными, поэтому для удобства перемещения по ним часто делают навигационное меню со ссылками на конкретные разделы. Давайте научимся делать так, чтобы при клике на ссылку, сайт плавно прокручивался до нужного места.
$("a" ) .click (function () { var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; $("html, body" ) .animate ({ scrollTop: destination } , 600 ) ; return false ; } ) ; Альтернативный взглядРаньше делали немного по другому - использовали определение браузера - $.browser.safari || $.browser.webkit и в зависимости от условия делали либо $("body").animate() , либо $("html").animate() . С версии 1.9 jQuery - $.browser была удалена и поэтому не сработает. Но можно модифицировать код и получить такой скрипт:
var matched, browser; jQuery.uaMatch = function ( ua ) { ua = ua.toLowerCase () ; var match = /(chrome)[ \/]([\w.]+)/ .exec ( ua ) || /(webkit)[ \/]([\w.]+)/ .exec ( ua ) || /(opera)(?:.*version|)[ \/]([\w.]+)/ .exec ( ua ) || /(msie)[\s?]([\w.]+)/ .exec ( ua ) || /(trident)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ua.indexOf ("compatible" ) < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/ .exec ( ua ) || ; return { browser: match[ 1 ] || "" , version: match[ 2 ] || "0" } ; } ; matched = jQuery.uaMatch ( navigator.userAgent ) ; //IE 11+ fix (Trident) matched.browser = matched.browser == "trident" ? "msie" : matched.browser ; browser = { } ; if ( matched.browser ) { browser[ matched.browser ] = true ; browser.version = matched.version ; } $("a" ) .click (function () { var elementClick = $(this ) .attr ("href" ) ; var destination = $(elementClick) .offset () .top ; if (browser.chrome || browser.webkit ) { $("body" ) .animate ({ scrollTop: destination } , 600 ) ; } else { $("html" ) .animate ({ scrollTop: destination } , 600 ) ; } return false ; } ) ;Вот и все. Всем успехов!
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
Плавная прокрутка страницы вверх на jQueryВ этом видео мы разберем такой момент, как создание плавной прокрутки страницы вверх при клике по ссылке.
Очень часто бывает удобно воспользоваться ссылкой "Наверх", когда находишься ближе к нижней части страницы.
Можно реализовать эту возможность исключительно средствами HTML и CSS, однако в данном видео я покажу вам, как можно доработать эту функцию и сделать ее более удобной с помощью библиотеки jQuery.
JavaScript позволит нам обеспечить плавность перемещения от нижней части страницы к верхней, избежав "рывка", который происходит при использовании обычного "якоря".
Появляются они лишь при прокрутке страницы вниз на определенное число пикселей, которое можно самостоятельно задавать.
Это очень удобно еще и потому, что привлекает внимание человека к интерактивному элементу на странице и он замечает, что есть возможность воспользоваться такой функцией.
Демонстрацию работы скрипта и подробный разбор кода смотрите в видео ниже.
Краткий обзор урока (все подробности смотрите в видео):
index.html
1. Первое , что нам нужно - это файл, в котором будет размещена сама ссылка "Наверх". Пусть это будет index.html .
Для того, чтобы все работало, в секции head документа нам нужно подключить файл стилей и два JavaScript-файла (о них - чуть позже):
Сначала подключаем библиотеку jQuery, затем - файл script.js с кодом, который мы пишем сами.
Также в этом файле нам нужно разместить саму ссылку, при клике по которой будет происходить плавный подъем к верхней части страницы:
Наверх
script.js
2. Второе - это файл script.js, в котором мы прописываем функции, выполняющие основные действия:
$(document).ready(function(){ $(function (){ $("#back-top").hide(); $(window).scroll(function (){ if ($(this).scrollTop() > 700){ $("#back-top").fadeIn(); } else{ $("#back-top").fadeOut(); } }); $("#back-top a").click(function (){ $("body,html").animate({ scrollTop:0 }, 800); return false; }); }); });
Итак, сначала мы дожидаемся полной загрузки документа и скрываем нашу кнопку "Наверх", чтобы изначально ее не было видно на странице.
Далее мы фиксируем событие прокрутки окна и если прокрутка идет вниз на 700 пикселей и более, то мы плавно отображаем кнопку "Наверх" с помощью метода fadeIn . В противном случае мы ее скрываем методом fadeOut .
Во второй анонимной функции мы отслеживаем событие клика по ссылке внутри блока #back-top и применяем метод animate для плавного подъема к верхней части страницы (scrollTop:0) за 800 мс.
style.css
3. И, третье - это файл стилей. В нашем примере в нем нет ничего лишнего, поэтому стилей мало:
Body { font-size: 13px; line-height: 1.65em; font-family: Verdana, sans-serif; } p { margin-left: 150px; } /* Кнопка наверх */ #back-top{ position:fixed; bottom:10px; left: 0px; } #back-top a{ width:55px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s; } /* графическая стрелка */ #back-top span{ width:55px; height:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") no-repeat bottom center; -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}
Из того, о чем стоит упомянуть, можно назвать значение fixed для свойства position у блока #back-top . Это позволяет нам зафиксировать положение кнопки относительно окна браузера.
