Html css js кнопка крутится. Создаем кнопку «Наверх» или Scroll to Top на jQuery
Кнопка «Вернуться Наверх» или « » популярный и полезный элемент на страницах современных сайтов, особенно в тех случаях, когда на этих страницах размещено много контента.
Прежде всего, такие в целом улучшают юзабилити сайта. Когда пользователь ознакомившись с большим количеством контента, прокрутив страницу до самого низа, чтобы вернуться в верхнюю часть сайта, использует стандартный скролинг. Чтобы пользователь перенаправлялся в верхнюю часть страницы автоматически, разработчики и админы сайтов, думающие о своих посетителях, как раз и используют различные вариации кнопок «Вернуться Наверх». Это могут быть самые простые решения без задействования каких-либо дополнительных библиотек или скриптов, а так же с расширенным функционалом, с подключением библиотеки и небольшого исполняющего скрипта.
Оформляют кнопки «Наверх» по-разному, это могут быть и банальные текстовые ссылки, и классического вида кнопки, круглые кнопки со стрелкой или же используют картинку соответствующего типа. Чаще всего эти кнопки выглядят статично, иногда используется изменение цвета фона и шрифта при наведении, реже разработчики применяют анимационные эффекты.
Сегодня, на простом примере, рассмотрим, как с помощью анимации CSS можно добавить немного движухи для всплывающей кнопки «Вернуться Наверх» и попутно разберём сам скрипт содержащий события jQuery, необходимые для функционирования кнопки.
Чтобы задействовать кнопку на своем сайте, нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить библиотеку jQuery и прописать небольшой исполняемый js, и кнопка будет работать. Оформление внешнего вида и анимацию сформируем с помощью CSS, подключив файл стилей style.css к документу html.
И так, если у вас на сайте, ещё не подключена библиотека jQuery, это легко сделать, подключив актуальную версию напрямую из сети доставки контента (CDN) Google, для этого достаточно, перед закрывающим тегом прописать следующую строку:
| < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > |
Ниже, прямо под этой строкой, размещаете небольшой исполняемый js, который и будет выводить нашу кнопку с определённой задержкой, а так же выполнять главную свою функцию, плавно возвращать пользователя наверх страницы.
| < script> jQuery(document) . ready(function ($) { var //скорость прокрутки к началу страницы speed = 500 , //html-разметка кнопки $scrollTop = $("" ) . appendTo("body" ) ; $scrollTop . click(function (e) { e. preventDefault() ; $( "html:not(:animated),body:not(:animated)" ) . animate({ scrollTop: 0 } , speed ) ; } ) ; //настройка режима появления кнопки function show_scrollTop() { ( $(window) . scrollTop() > 300 ) ? $scrollTop . fadeIn(600 ) : $scrollTop . fadeOut(600 ) ; } $(window) . scroll( function () { show_scrollTop() ; } ) ; show_scrollTop() ; } ) ; |
jQuery(document).ready(function($){ var //скорость прокрутки к началу страницы speed = 500, //html-разметка кнопки $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //настройка режима появления кнопки function show_scrollTop(){ ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut(600); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });
Добавил в скрипт некоторые комментарии, так сказать, для большего понимания. Как писал выше, данный метод исключает необходимость добавлять какие-либо теги в разметку HTML страницы, с этим прекрасно справляется скрипт. Когда пользователь прокрутит страницу вниз на 300px, плагин пропишет тег кнопки, в нашем случае это:
| < a href= "#" title= "Быстро вернуться наверх" class = "scrollTop" >< i class = "fa fa-angle-double-up" > |
в тело страницы, всё там же перед закрывающим тегом .
Для плавного появления и скрытия кнопки используем функции.fadeIn () и.fadeOut () с заданной скоростью 600 миллисекунд. Скорость прокрутки к началу страницы выставляем в значении 500 миллисекунд.
| < link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel= "stylesheet" type= "text/css" > |
После подключения Font Awesome, вы можете использовать их в коде HTML или, как в нашем случае в js, с помощью специальных классов, базового fa и класса для определённого типа иконки, у нас это fa-angle-double-up . Узнать класс той или иной иконки можно на сайте .
Внешний вид контейнера иконки, размер и цвет фона, позиционирование, цвет и размер шрифта, всё это определяем уже непосредственно в css, ориентируясь на селектор.scrollTop i
| /* формируем тело кнопки, положение и эффект перехода */ .scrollTop { /* по-умолчанию скрыта */ display : none ; /* скругяем углы */ -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; /* фиксируем позицию кнопки */ position : fixed ; /* размеры кнопки */ width : 60px ; height : 60px ; /* положение кнопки */ right : 1rem ; bottom : 1rem ; /* вид курсора */ cursor : pointer ; /* эффект перехода между двумя состояниями кнопки */ -webkit-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; -moz-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; -ms-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; -o-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; transition : bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) } /* смещение кнопки вверх при наведении */ .scrollTop : hover { bottom : 2rem } /* дополнительные элементы офрмления кнопки */ .scrollTop : before , .scrollTop : after { content : "" ; top : 0 ; left : 0 ; background-color : #766DCC ; width : 60px ; height : 60px ; -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; -webkit-animation-fill-mode: both ; -moz-animation-fill-mode: both ; animation-fill-mode : both ; position : absolute ; opacity : 0 ; } /* определяем имя, тип и скорость анимации лля:before */ .scrollTop : before { background-color : #736cad ; -webkit-animation: clickMe 1.8s 333ms infinite ease-out; -moz-animation: clickMe 1.8s 333ms infinite ease-out; animation : clickMe 1.8s 333ms infinite ease-out } /* определяем имя, тип и скорость анимации лля:after */ .scrollTop : after { -webkit-animation: clickMe 1.8s 777ms infinite ease-out; -moz-animation: clickMe 1.8s 777ms infinite ease-out; animation : clickMe 1.8s 777ms infinite ease-out } /* формируем вид иконки */ .scrollTop i { width : 30px ; height : 30px ; display : block ; background : rgba (28 , 144 , 243 , 0.61 ) ; color : #fff ; text-align : center ; line-height : 30px ; font-size : 1.3rem ; background-size : 12px ; -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; position : absolute ; left : 15px ; top : 15px ; z-index : 100 } /* анимация */ @-webkit-keyframes clickMe { 0% { opacity : 0 ; -webkit-transform: scale (0 ) } 5% { opacity : 1 } 100% { opacity : 0 } } @-moz-keyframes clickMe { 0% { opacity : 0 ; -moz-transform: scale (0 ) } 5% { opacity : 1 } 100% { opacity : 0 } } @keyframes clickMe { 0% { opacity : 0 ; -webkit-transform: scale (0 ) ; -moz-transform: scale (0 ) ; -ms-transform: scale (0 ) ; -o-transform: scale (0 ) ; transform : scale (0 ) } 5% { opacity : 1 } 100% { opacity : 0 } } |
/* формируем тело кнопки, положение и эффект перехода */ .scrollTop { /* по-умолчанию скрыта */ display: none; /* скругяем углы */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; /* фиксируем позицию кнопки */ position: fixed; /* размеры кнопки */ width: 60px; height: 60px; /* положение кнопки */ right: 1rem; bottom: 1rem; /* вид курсора */ cursor: pointer; /* эффект перехода между двумя состояниями кнопки */ -webkit-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); -ms-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); -o-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1) } /* смещение кнопки вверх при наведении */ .scrollTop:hover { bottom: 2rem } /* дополнительные элементы офрмления кнопки */ .scrollTop:before, .scrollTop:after { content: ""; top: 0; left: 0; background-color: #766DCC; width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; position: absolute; opacity: 0; } /* определяем имя, тип и скорость анимации лля:before */ .scrollTop:before { background-color: #736cad; -webkit-animation: clickMe 1.8s 333ms infinite ease-out; -moz-animation: clickMe 1.8s 333ms infinite ease-out; animation: clickMe 1.8s 333ms infinite ease-out } /* определяем имя, тип и скорость анимации лля:after */ .scrollTop:after { -webkit-animation: clickMe 1.8s 777ms infinite ease-out; -moz-animation: clickMe 1.8s 777ms infinite ease-out; animation: clickMe 1.8s 777ms infinite ease-out } /* формируем вид иконки */ .scrollTop i { width: 30px; height: 30px; display: block; background: rgba(28, 144, 243, 0.61); color: #fff; text-align: center; line-height: 30px; font-size: 1.3rem; background-size: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; position: absolute; left: 15px; top: 15px; z-index: 100 } /* анимация */ @-webkit-keyframes clickMe { 0% { opacity: 0; -webkit-transform: scale(0) } 5% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes clickMe { 0% { opacity: 0; -moz-transform: scale(0) } 5% { opacity: 1 } 100% { opacity: 0 } } @keyframes clickMe { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0) } 5% { opacity: 1 } 100% { opacity: 0 } }
Осталось рассмотреть саму анимацию. Эффект анимации применён не ко всей кнопке, а к дополнительным псевдоэлементам:after и:before . Чтобы создать CSS-анимацию необходимо добавить в стили этих элементов свойство animation , что позволит определить имя, настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Внешний вид анимации настраивается с помощью @keyframes , набора ключей настраивающего кадры анимации.
В нашем примере имя анимации: clickMe , длительность: 1.8s , задержка: 333ms для:before и 777ms для псевдоэлемента:after . Так же определяем количество повторении анимации — бесконечное infinite и тип анимации ease-out — ускорение в начале.
После того, как мы настроили временные свойства анимации, остаётся определить внешний вид анимации, делается это внутри блока @keyframes . Сначала задается имя анимации, а затем внутри фигурных скобок описываются её шаги. Из примера кода видно, что используются кадры свойства opacity (прозрачность) и трансформации элемента transform с функцией scale — масштаб элемента. Шаги анимации заданы через проценты.
Анимация CSS свойств описана отдельно для webkit-браузеров @-webkit-keyframes и браузера Mozilla Firefox @-moz-keyframes , дабы исключить некорректное отображение анимации в этих веб-браузерах.
На этом всё. Ещё раз просмотрите живой пример работы кнопки «Вернуться наверх» и если оно вам надо, скачивайте исходники упакованные в архив и выложенные в облако на Я.Диске.
С Уважением, Андрей
На сайтах с большим количеством контента (например, блоги) просто необходимо использовать кнопку "Наверх". Ведь пользователю, прочитавшему большую статью, может понадобиться вернуться в верхнюю часть страницы для продолжения навигации по сайту. Или посетитель, перед тем как прочитать статью полностью, пролистывает ее от начала до конца и пробегает глазами по заголовкам, картинкам, схемам, чтобы заранее оценить, стоит читать статью или нет. Обычно, в таких случаях, при отсутствии кнопки "Вверх", посетитель просто скролит страницу вверх колёсиком мыши или при помощи скрола (в боковой части браузера).
Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.
Кнопка наверх: HTML+CSSПреимущество данного способа - простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).
Кнопка наверх с помощью CSS - "Нубекс" .topNubex { position: fixed; right: 45px; bottom: 45px; } Вверх
К недостаткам данного способа относится то, что в таком случае прокрутка не может быть плавной и посетитель мгновенно перенаправляется в верхнюю часть страницы.
Кнопка наверх: JavaScriptПриведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.
Кнопка "Вверх" при помощи JavaScript - "Нубекс"
#topNubex {
position: fixed;
right: 45px;
bottom: 45px;
}
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$("#topNubex").fadeIn();
} else {
$("#topNubex").fadeOut();
}
});
$("#topNubex").click(function() {
$("body,html").animate({scrollTop:0},700);
});
});
В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки "Наверх" на сайт.
Кнопка "Наверх" для сайта стала появляться у многих на сайтах и блогах с 2010 годов. Является ли эта кнопка полезной и пользуются ли ей пользователи? Пользуются, но мало. Поэтому эту кнопку обычно добавляют где-нибудь с краю сайта (справа внизу чаще всего).
Реализации кнопки наверх три. Естественно каждый из них можно еще поделить на какие-то тонкости, но базовых идей три. Мы рассмотрим каждую из них и дадим каждому свою оценку.
Способы реализации кнопки наверхНачну с самого лучшего способа (сложность реализации - средне).
1. На основе JavaScript и AJAX (JQuery)На этом сайте реализован как раз ниже описанный пример.
В этом способе мы должны получить отличную кнопку, со следующими характеристиками:
- нажатие кнопки обеспечит плавный переход вверх страницы;
- кнопка будет прозрачной;
- есть возможность задания высоты в пикселях, когда кнопка станет видимой;
Если делать все по инструкции, то проблем с созданием кнопки возникнуть не должно. Итак, инструкция по шагам:
A. Создание js-файла
Откройте любой блокнот (я рекомендую Notepad++) вставьте код ниже и сохраните его с расширением.js (например, gototop.js
):
B. Настройка стиля
Добавьте в файл стилей следующий код (файл стилей, это файл с расширением.css). Чаще всего его имя main.css или style.css:
Вместо top.png нужно прописать полный или относительный адрес своей картинки. Вместо 0px 0px и -56px 0px нужно прописать свои смещения. Либо же не использовать смещения, а просто воспользоваться другой картинкой при нажатии.
C. Подключение скриптов к сайту
В приведенном примере мы использовали технологию AJAX, поэтому необходимо подключить библиотеку jquery. Также нужно подключить созданный вами файл gototop.js в первом пункте:
А в самом низу сайта (перед тегом body) добавить строчку:
Все файлы, которые необходимы для этого я собрал в архиве: gototop.rar
2. Кнопка без применения AJAXРеализация этого метода очень простая, а точнее проще некуда. При этом этот метод я бы разбил даже на два подметода.
2.1. С применением якоря ссылкиВверху сайта для какого-нибудь элемента прописываем id . Логично было бы прописать его для заголовка , потому что это начало контента. А внизу можно разместить ссылку на якорь. Код примерно такой:
... Заголовок статьи ...Минусы этого способа существенные:
- Кнопка наверх будет всегда на виду, даже если пользователь и так вверху
- Необходимо прописывать якорь. Это может быть не всегда удобно
- Переход наверх получается резким (нет плавного движения)
Преимущество одно: не нужно использовать скриптов.
2.2. С применением JavaScriptСпособ с использованием JavaScript очень похож на предыдущий. Та же кнопка, только на этот раз нам не нужно будет делать якорь на всех страницах. Вот код:
...Стиль можно прописать такой же, как и в примере 2.1.
Я считаю, что лучше все же использовать способ 1, поскольку он обладает более приятным визуальным эффектом для пользователей, что является очень важным в век
Кнопка «Вверх к началу» - это то, что многие из вас, вероятно, видели на многих веб-сайтах. Это стрелка, которая появляется в правом нижнем углу веб-страницы при ее прокрутке. Когда вы нажимаете, она возвращает вас к началу страницы. Если вы хотите добавить кнопку «Наверх» в процессе разработки сайта, или просто интересуетесь, как вы можете создать её самостоятельно, добро пожаловать на борт!
Вернуться наверхНаш код будет состоять из двух частей, стилей CSS и маленького скрипта jQuery. Давайте начнем с CSS.
CSS стили для кнопкиМы начнем с создания стилей и разметки для нашей кнопки. Вот часть HTML:
<
link
rel
=
"stylesheet"
href
=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
>
<
a
id
=
"button"
>
Кнопка будет состоять только из одного якорного тега с id кнопка . Мы также включаем ссылку на библиотеку FontAwesome, чтобы можно было использовать значок для нашей кнопки.
Начальные стили для кнопки будут выглядеть так:
#button { display: inline-block; background-color: #FF9800; width: 50px; height: 50px; text-align: center; border-radius: 4px; margin: 30px; position: fixed; bottom: 30px; right: 30px; transition: background-color .3s; z-index: 1000; } #button:hover { cursor: pointer; background-color: #333; } #button:active { background-color: #555; }
Поскольку кнопка является элементом связки, а связки по умолчанию являются встроенными элементами, нам нужно изменить свойство display на встроенный блок, чтобы мы могли назначать ему размер.
Давайте сделаем квадратную кнопку 50х50 px с закругленными углами в 4px. Мы придадим ей ярко-оранжевый цвет и по 30px с каждой стороны. Фиксированная позиция всегда позволяет нашей кнопке оставаться в том же месте, когда мы прокручиваем страницу, а z-index очень большого значения, что кнопка всегда перекрывает другие элементы веб-сайта. Когда мы наводим курсор на кнопку, курсор меняется на указатель, а фон становится темно-серым. Чтобы сделать переход плавным, мы назначим переход на 0,3 секунды для свойства background-color . Также, когда мы нажимаем кнопку, цвет фона также изменяется и становится немного светлее.
Добавляем иконкуСейчас наша кнопка пустая, давайте добавим на неё иконку. Мы делаем это, добавляя ::after псевдо=элемент типа этого:
#button::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 2em; line-height: 50px; color: #fff; }
Мы собираемся выбрать значок из самой популярной библиотеки шрифтов
FontAwesome
. Начнем с иконкой
Chevron Up .
Чтобы отобразить её в псевдоэлементе, установите значение FontAwesome для тега font-family и назначьте значение Unicode для вашего значка в content .
Также убедитесь, что высота вашей линии равна высоте вашего значка, если вы хотите, чтобы он был центрирован по горизонтали.
Добавляем функциональность с jQueryВ этом подразделе мы поговорим о том, как собственно сделать кнопку рабочей. Самый простой способ это сделать - использовать JavaScript библиотеку jQuery. Для начала нам нужно добавить jQuery в HTML разметку. Добавьте эту строку прямо перед тем как закрыть тег body.
< script src =" https: // cdnjs . cloudflare . com / ajax / libs / jquery /3.1.1/ jquery . min . js" >
Сейчас мы можем написать наш скрипт используя синтаксис jQuery. Добавьте этот скрипт после строки jQuery:
jQuery(document).ready(function() { var btn = $("#button"); $(window).scroll(function() { if ($(window).scrollTop() > }); btn.on("click", function(e) { e.preventDefault(); $("html, body").animate({scrollTop:0}, "300"); }); });
Давайте поближе посмотрим на этот скрипт. Вы, наверно, заметили первую строку кода:
jQuery(document
).ready(function
() {
Запускать код внутри этой функции стоит только в том случае, если документ полностью загружен. Это отличный способ предотвратить ошибки, если ваш код JavaScript хочет внести изменения в части веб-страницы, которые не полностью загружены в браузере. Код, который мы запускаем после документа, полностью загружен и состоит из двух основных блоков кода, каждый из которых выполняет свою собственную работу. Первая часть скрипта заставляет нашу кнопку появляться и исчезать после того, как прокрутка страницы достигает определенной точки. Вторая часть делает прокрутку страницы вверх после нажатия на кнопку. Давайте рассмотрим каждый из них подробно.
Появление и исчезновение кнопкиВот код, который отвечает за эту функцию:
Var btn = $("#button"); $(window).scroll(function() { if ($(window).scrollTop() > 300) { btn.addClass("show"); } else { btn.removeClass("show"); } });
Сначала мы объявляем переменную btn и назначаем ей ID button , так что нам будет легче обратиться к нему позже в коде. Также это помогает JavaScript быстрее выполнять вычисления. Как только мы сохраним элемент в переменной, JavaScript не будет нуждаться в поиске по всей странице много раз, когда нам нужно будет использовать ее снова в нашем коде.
В jQuery есть удобная функция .scroll() .
Она связывает кусок кода, который будет выполняться каждый раз, когда происходит прокрутка на вашей веб-странице. Она принимает один параметр функции, которая выполняется каждый раз при прокрутке страницы. Вы можете применить его к любому прокручиваемому элементу, например фреймам и элементам с дополнительными свойствами, установленным для прокрутки. Обычно мы применяем его к элементу окна, так как в большинстве случаев там происходит прокрутка, включая наш пример.
$ (window ). scroll (function () {
Внутри функции мы постелили утверждение if/else:
If ($(window).scrollTop() > 300) { btn.addClass("show"); } else { btn.removeClass("show"); }
То, что мы пытаемся сделать здесь, это проверить вертикальное положение полосы прокрутки и сделать, чтобы наша кнопка появлялась, когда прокрутка ниже определенной точки, и исчезала, когда она находится выше этой точки.
Чтобы получить текущую позицию полосы прокрутки, мы собираемся использовать встроенный метод jQuery .scrollTop() . Он просто возвращает несколько пикселей, которые скрыты над прокручиваемой областью.
Таким образом, каждый раз, когда мы прокручиваем страницу, JavaScript проверяет, сколько пикселей скрыто, и сравнивает их с числом. В нашем случае это количество до 300, но вы можете изменить его, если хотите.
Если мы пройдем 300px, то мы добавим класс show к нашей кнопке, который заставит её появиться. Если число меньше 300, мы удаляем этот класс. Добавление и удаление классов является еще одной причиной популярности jQuery. Мы можем сделать это с помощью двух простых методов addClass() и removeClass() . Однако у нас пока нет класса show в нашем CSS, поэтому добавим его:
If ($(window).scrollTop() > 300) { btn.addClass("show"); } else { btn.removeClass("show"); }
По умолчанию ваша кнопка будет скрыта, поэтому нам нужно добавить еще несколько правил в элемент #button :
#button { transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; }
Чтобы сделать переход плавным, давайте добавим еще два значения в атрибут перехода, непрозрачность и видимость, установленные на 0,5 секунды.
Подъём наверхВторая часть скрипта позволяет вам подняться наверх, после нажатия на кнопку.
Btn.on("click", function(e) { e.preventDefault(); $("html, body").animate({scrollTop:0}, "300"); });
Первый метод jQuery, который мы видим здесь это
on()
.
Его первым параметром является «click» JavaScript-событие, которое происходит каждый раз, когда мы кликаем мышей в нашем браузере. Второй параметр - это функция обработки, которая запускается, как только происходит событие.
Функция обработки принимает параметр события. Мы можем назвать все, что захотим, но обычно предпочтительнее e или event . Нам нужен параметр события, чтобы передать его функции и использовать для метода preventDefault() .
Метод e.preventDefault() предотвращает случайное действие события, например, ссылка не приводит нас к следующей странице. В нашем случае это не имеет решающего значения, поскольку наш якорный элемент не имеет атрибута href и в любом случае не приведет нас к новой странице, но всегда лучше дважды проверить.
Метод jQuery .animate() - это тот, который выполняет весь трюк.
$("html, body").animate({scrollTop:0}, "300");
Первый параметр метода .animate() - это список свойств, которые мы должны анимировать. Наше свойство называется scrollTop , и мы хотим, чтобы оно имело значение 0 . Тип этого параметра является простым объектом, поэтому нам нужно использовать фигурные скобки и записывать наши значения, используя синтаксис парой ключ / значение.
Второй параметр - это скорость, с которой мы хотим, чтобы наша анимация запускалась. Он измеряется в миллисекундах, и чем выше число, тем медленнее анимация. Значение по умолчанию - 400, но изменим его на 300.
Наконец, мы применяем метод animate к HTML и элементам body на нашей странице.
Теперь каждый раз, когда мы нажимаем кнопку, это возвращает нас в начало страницы.
ДемоФинальную версию вы можете посмотреть в демо CodePen . Я также добавила примеры текста для демонстрации.
Посмотрите на код кнопки «Наверх» Мэтью Кейна (@matthewcain ) на CodePen .
ЗавершениеКнопка «Наверх» полезный инструмент в дизайне интерфейса страницы. И если на вашем сайте будет такая, она сделает взаимодействие посетителей с сайтом намного удобнее. Этот гайд поможет вам разобраться в CSS и JavaScript, даже если вы не веб-разработчик. Надеюсь, что пост был вам полезен и у вас непременно получится сделать такую кнопку!
В этом посте мы с вами сделаем кнопку “Наверх”, ее суть – это появится при прокрутке сайта вниз и при нажатии на ее, отправить пользователя на верх текущей страницы. Думаю объяснять много не стоит мы все встречали подобные кнопки “наверх” на многих сайтах.
План по созданию кнопки “Наверх”1. Создадим html структуру для данной кнопки.
2. Стилизуем ее. Сделаем ее невидной и разместим правее относительно края страницы сайта.
3. Напишем скрипт, который будет отображать кнопку после прокрутки и обрабатывать нажатие пользователем на саму кнопку “Наверх”
Итак с планом действий по созданию кнопки наверх все понятно, приступим к его реализации 🙂
1. Создадим html структуру для кнопки “Наверх”Код кнопки поместим перед закрывающимся тегом
2. Стили для кнопки “Наверх”Кнопку я решил сделать с фиксированной позицией в правом нижнем углу. Задал иконке фиксированный размер, сделал фоновый цвет и закругленные углы.
Также настроил стиль для ховер события и сделал плавный переход с помощью свойство transition.
/* Back to top button */ #back-to-top{ position:fixed; z-index: 999; display:none; bottom:70px; right:15px; cursor:pointer; } #back-to-top i{ width: 50px; height: 50px; display:block; color: #fff; background: #26ADE4 ; text-align:center; font-size:16px; line-height: 50px; border-radius: 5px; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all; transition: .3s all; } #back-to-top i:hover{background:#333;}
3. Скрипт для кнопки “Наверх”Для начала объявим несколько переменных. Первая limit
– будет содержать значение 1/3 высоты экрана и служить условием для появления нашей кнопки “Наверх”.
Вторая backToTop
– будет хранит jQuery выборку нашей кнопки, чтобы не обращаться к ней по несколько раз.
Var limit = $(window).height()/3, $backToTop = $("#back-to-top");
Напишем условие для появление и исчезновения нашей кнопки. Условие в нашем случае будет заключаться в проверке того прокрутил ли пользователь треть экрана или нет.
Если прокрутил, то кнопка “Наверх” – появится, если нет или вернулся на самый верх, то она исчезнет.
$(window).scroll(function () { if ($(this).scrollTop() > limit) { $backToTop.fadeIn(); } else { $backToTop.fadeOut(); } });
Последний штрих – это привязать событие click к нашей кнопке “Наверх”. При нажатии на кнопку, нас должно переносить в начало текущей страницы. Сделаем мы это с помощью нескольких строк кода:
// scroll body to 0px on click $backToTop.click(function () { $("body,html").animate({ scrollTop: 0 }, 1500); return false; });
Вот так выглядит весь код целиком
Var limit = $(window).height()/3, $backToTop = $("#back-to-top"); $(window).scroll(function () { if ($(this).scrollTop() > limit) { $backToTop.fadeIn(); } else { $backToTop.fadeOut(); } }); // scroll body to 0px on click $backToTop.click(function () { $("body,html").animate({ scrollTop: 0 }, 1500); return false; });
ЗаключениеВот мы и закончили работы над созданием кнопки “Наверх”
. Это всего лишь один из вариантов, разнообразить который вы можете с помощью внесения правок в CSS часть данного поста.
В демо-статье использовались CSS эффекты описанные в этом посте