Новости звезд
Как сделать красивую анимированную кнопку наверх. Анимированный переход на верх страницы. Анимированная кнопка перехода вверх
Здравствуйте! Пример скрипта можно посмотреть в этом блоге, когда вы прокручиваете страницу вниз, в правом нижнем углу появляется картинка-кнопка "Наверх", нажав на которую вы попадете к верхней шапке сайта.
Под каждым примером с картинкой вы найдете код (скрипт), который надо вставить перед закрывающимся тегом ""
Три небольших момента для корректной установки:
Js">
Js">
Js">
Js">
Js">
Js">
Js">
Js">
Js">
0.js">
1.js">
2.js">
3.js">
4.js">
Js">
6.js">
7.js">
8.js">
9.js">
0.js">
1.js">
2.js">
3.js">
4.js">
5.js">
6.js">
7.js">
Простая кнопка "Наверх" без JavaScriptСуществует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
В стили вашего сайта, обычно они находятся в файле style.css надо вставить: .topbutton { width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding:10px; position:fixed; bottom:50px; right:50px; cursor:pointer; color:#333; font-family:verdana; font-size:12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }
Недостатки:
Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.
Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.
Плюсы данного вида кнопки:
Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.
Кнопки прокрутки вверх и вниз на JQUERYДанное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают.
- Название: Кнопки прокрутки вверх и вниз на JQUERY
- Ссылка: 57.72 KB
- Формат: ZIP архив
В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.
Кнопка плавной прокрутки вверх при помощи JQueryЕще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.
Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.
Теперь разберемся, что нужно сделать для подключения кнопки к сайту
Изображение:
Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:
HTML код:
Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:
CSS стили:
Scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url("icon_top.png") no-repeat; }
При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.
Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами ...? вставляем следующее:
Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:
Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.
Как вы видите есть еще два параметра - 0 - значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 - это скорость анимации в миллисекундах.
Здравствуйте, уважаемые посетители!
Я продолжаю публиковать статьи технической тематики.
И сегодня я затрону интересную тему, в которой мы обсудим кнопку прокрутки вверх страницы на сайте. Мы поговорим о важности данной кнопки, как я люблю это делать. Также покажу наиболее интересные и эффективные реализации этой функции.
Нужна лиЯ думаю, что не стоит показывать, как она выглядит на сайтах, так как почти на каждом ресурсе она есть. Это простая кнопка со стрелкой вверх или со словом, при нажатии на которую вы быстро перемещаетесь в самую верхнюю область сайта.
Данная функция - это некий элемент, который в определенных случаях улучшает юзабилити сайта. Вот в каких случаях, мы сейчас с вами и разберем.
Первый самый важный, а может и единственный случай, когда кнопка вверх нужна - это наличие огромного количества контента на странице. Если страница длинная, то довольно затруднительно ее листать в самый верх.
Приходится либо пользоваться полосой прокрутки, чем пользуются малое количество людей. Я по крайней мере ей вообще не пользуюсь, так как это лишние движение мышки, да и не очень удобно. Либо же приходится крутить ролик на мышке, что очень долго и со временем напрягает.
Поэтому, если на вашем сайте действительно большие статьи, то кнопку можно и установить, но сделать ее нужно такой, чтобы на нее было легко нажать и сделать это было проще, чем крутить ролик или воспользоваться полосой прокрутки в браузере. В другом случае, какой от нее будет толк, если она будет равнозначна стандартным действиям?
Исходя из этого имеются наиболее распространенные и самые действенные кнопки прокрутки вверх, которые действительно эффективно работают. Один из таких вариантов - это кнопка вверх, как в социальной сети Вконтакте. К реализации этого способа мы и переходим.
Кнопка вверх, как ВконтактеОтличительной чертой данной кнопки является ее простота в использовании. Она имеет вид полосы прокрутки в левой части сайта, которая занимает всю высоту ресурса.
Такой вариант уже зарекомендовал себя, так как практически нет пользователей, которые ей не пользуются в соц. сети Вконтакте. Удобна данная реализация тем, что не приходится целиться курсором мышки на какую-то кнопку. Достаточно просто кликнуть на левую область сайта и страница прокрутится в самый верх. Нет необходимости даже следить за курсором, можно просто двинуть мышью в самый край экрана и кликнуть один раз.
Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант - запросто.
Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.
Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.
Если вы хотите разместить скрипт и не мучиться с загрузкой, то даю вам сам код скрипта.
JavaScript
$(document).ready(function() { $("body").append("^ Наверх"); $ (window).scroll (function () { if ($ (this).scrollTop () > 300) { $ (".button-up").fadeIn(); } else { $ (".button-up").fadeOut(); } }); $(".button-up").click(function(){ $("body,html").animate({ scrollTop: 0 }, 100); return false; }); $(".button-up").hover(function() { $(this).animate({ "opacity":"1", }).css({"background-color":"#E1E7ED","color":"#45688E"}); }, function(){ $(this).animate({ "opacity":"0.7" }).css({"background":"none","color":"#45688E"});; }); });
$ (document ) . ready (function () { $ ("body" ) . append ("^ Наверх" ) ; $ (window ) . scroll (function () { if ($ (this ) . scrollTop () > 300 ) { $ (".button-up" ) . fadeIn () ; } else { $ (".button-up" ) . fadeOut () ; } ) ; $ (".button-up" ) . click (function () { $ ("body,html" ) . animate ({ scrollTop : 0 } , 100 ) ; return false ; } ) ; $ (".button-up" ) . hover (function () { $ (this ) . animate ({ "opacity" : "1" , } ) . css ({ "background-color" : "#E1E7ED" , "color" : "#45688E" } ) ; } , function () { $ (this ) . animate ({ "opacity" : "0.7" } ) . css ({ "background" : "none" , "color" : "#45688E" } ) ; ; } ) ; } ) ;
|
В данном коде можно изменить некоторые параметры под себя.
- Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
- В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
- В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.
Данный код можно разместить между тегами в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.
Еще более эффективным вариантом является загрузка этого скрипта из отдельного файла. Файл можете скачать по кнопке ниже. Находится он внутри архива.
Затем загружаете данный файл на хостинг. Можно загрузить в папку с темой, а можно и в корень сайта. Я, по традиции, сделать это в папку с шаблоном. Потом стоить в то же место прописать код, который будет грузить данный файл. Для этого воспользуйтесь следующей строчкой.
JavaScript
|
В нем необходимо будет заменить пой путь к файлу на ваш во второй строке. Затем вставить этот код в ту же область перед закрывающим тегом, как показано ниже.
После редактирования файла, если мы делали это на компьютере, загружаем его на хостинг с заменой исходного файла. После этого простая кнопка вверх на вашем сайте будет работать.
Для редактирования параметров в данном файле, его потребуется открыть с помощью редактора Notepad.
Данный вариант очень хорош своей простотой, как в работе, так и в установке на сайта. Более продвинутым вариантом является вариант, когда кроме прокрутки вверх имеется возможность вернуться в то место, с которого осуществилась прокрутка. Именно такой вариант реализован в соц. сети Вконтакте. Как его сделать, смотрим ниже.
Второй способ кнопки наверх от ВконтактеПо данному способу я записал подробный видео-урок.
Такой вариант сейчас и стоит на моем блоге. Я пока не смог проанализировать его полезность. Но, если он стоит на одном из гигантов рунета, то можно смело предположить, что толк от него есть. Конечно при таких масштабах это и ежу понятно. А вот на мелком ресурсе можно хорошенько подумать перед его установкой. Но я смотрю на перспективу, поэтому и поставил такое решение.
Реализация второго способа чуть посложнее, но процесс уже должен быть вам знаком, если делали другие технические моменты на своем ресурсе.
Состоит из 3х этапов:
Для начала мы должны разместить скрипт, который будет делать плавность прокрутки и плавное изменение цвета при наведении, как самой области, так и цвета сова "Наверх" в зависимости от дальности прокручивания страницы вниз.
Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.
Файл скрипта скачайте по кнопке ниже.
Размещаете файл на хостинге и делаете загрузку файл через код в самом низу сайта, как делали это ранее. Файл называется точно также, как и в 1м способе, поэтому можно взять ту же самую строку кода для вывода.
⇓ Назад ⇑ Наверх
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" > ⇓Назад< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" > ⇑Наверх< / span > < / span > < / a > |
Разместить его можно в самом низу сайта, перед закрывающим тегом в файле footer.php.
Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.
/* описание контейнера */ .leftbar-wrap { position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; } /* описание кнопки «Вверх» */ .left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */ #scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */ .active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */ .leftbar-wrap:hover .active-area { background: #E1E7ED !important; opacity:0.7 !important; } /* делаем подсветку немного ярче при наведении на надпись */ .leftbar-wrap .active-area:hover { } /* центрируем надпись у кнопок */ .bar-desc-niz { top: 26% !important; position: relative; display: inline-block; } .bar-desc-top { top: 10% !important; position: relative; display: inline-block; }
/* описание контейнера */ Leftbar-wrap { position : fixed ; height : 100% ; top : 0 ; width : 99px !important ; left : 0 ; /* описание кнопки «Вверх» */ Left-controlbar { height : 100% ; display : block ; text-decoration : none ; /* описание кнопки «Вернуться» */ #scroll-back { display : block ; height : 100% ; top : 0 ; display : none ; text-align : center ; /* описание столбца фонового цвета для обеих кнопок */ Active-area { width : 100px ; height : 100% ; display : block ; text-align : center ; /* задаем прозрачность фонового цвета при наведении на активную область страницы */ Leftbar-wrap:hover .active-area { background : #E1E7ED !important ; opacity : 0.7 !important ; /* делаем подсветку немного ярче при наведении на надпись */ Leftbar-wrap .active-area:hover { /* центрируем надпись у кнопок */ Bar-desc-niz { top : 26% !important ; position : relative ; display : inline-block ; Bar-desc-top { top : 10% !important ; position : relative ; display : inline-block ; |
В зависимости от дизайна и структуры вашего ресурса, потребуется немного изменить некоторые параметры в данных стилях. Например, в строках 47 и 53 изменить параметр отступа слова "Назад" и "Наверх" от самого верха страницы соответственно
После редактирования всех файлов, можем смело загрузить их на хостинг и этот способ будет работать. Его реализацию можете посмотреть на моем блоге. Делайте на здоровье.
Мы переходим к следующему способу. Данный вариант уже будет содержать простую кнопку в правой нижней области экрана, нажав на которую, будет произведено перемещение верх страницы.
Третий способ кнопки наверх без плагинаРеализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.
Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом /
JavaScript
$(document).ready(function(){ $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 400); return false; }); }); });< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
Кнопка «Вернуться Наверх» или « » популярный и полезный элемент на страницах современных сайтов, особенно в тех случаях, когда на этих страницах размещено много контента.
Прежде всего, такие в целом улучшают юзабилити сайта. Когда пользователь ознакомившись с большим количеством контента, прокрутив страницу до самого низа, чтобы вернуться в верхнюю часть сайта, использует стандартный скролинг. Чтобы пользователь перенаправлялся в верхнюю часть страницы автоматически, разработчики и админы сайтов, думающие о своих посетителях, как раз и используют различные вариации кнопок «Вернуться Наверх». Это могут быть самые простые решения без задействования каких-либо дополнительных библиотек или скриптов, а так же с расширенным функционалом, с подключением библиотеки и небольшого исполняющего скрипта.
Оформляют кнопки «Наверх» по-разному, это могут быть и банальные текстовые ссылки, и классического вида кнопки, круглые кнопки со стрелкой или же используют картинку соответствующего типа. Чаще всего эти кнопки выглядят статично, иногда используется изменение цвета фона и шрифта при наведении, реже разработчики применяют анимационные эффекты.
Сегодня, на простом примере, рассмотрим, как с помощью анимации 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 , дабы исключить некорректное отображение анимации в этих веб-браузерах.
На этом всё. Ещё раз просмотрите живой пример работы кнопки «Вернуться наверх» и если оно вам надо, скачивайте исходники упакованные в архив и выложенные в облако на Я.Диске.
С Уважением, Андрей
При наличии значительного объема контента в материалах сайта веб-мастера используют так называемую "кнопку вверх" (scroll to top). Данная кнопка позволяет моментально пролистать контент к началу страницы, тем самым избавив пользователя от муторной ручной прокрутки.
Работу кнопки "scroll to top" Вы можете лицезреть на данной странице блога .
В качестве самой кнопки используется изображение в формате png , именно поэтому для начала следует подыскать для себя нужный вариант картинки. Для этого подойдет качественный сервис иконок iconfinder.
HTML код вывода кнопкиВставка блока div с идентивикатором arrowup осуществляется между тегами ... исполняемого файла шаблона (обычно это файл index.php). В шаблонах студии Yootheme это файл theme.php, который находится в папке "layouts".
CSS стили оформления кнопки
Код CSS стилей кнопки, который прикреплен к классу arrowup , размещается в любом подключенном к шаблону CSS файле. Обычно используется файл style.css, который размещается в папке "css".
#arrowup { position: fixed; right: 30px; /*позиция кнопки: отступ справа*/ bottom: 30px; /*позиция кнопки: отступ снизу*/ background: url(/images/arrowup.png); /*путь к изображению кнопки*/ width: 48px; /*размер кнопки по ширине*/ height: 48px; /*размер кнопки по высоте*/ cursor: pointer; display: none; opacity: 0.8; /*уровень прозрачности в статике*/ } #arrowup:hover { opacity: 1; /*уровень прозрачности при наведении*/ }
JS код для работы кнопкиJavaScript код, реализующий функционал кнопки, размещается либо между тегами ... исполняемого файла шаблона (index.php), либо перед закрывающим тегом .
$(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 0) { $("#arrowup").fadeIn(300); //скорость исчезновения кнопки } else { $("#arrowup").fadeOut(200); //скорость появления кнопки } }); $("#arrowup").click(function() { $("body,html").animate({ scrollTop: 0 }, 200); //скорость прокрутки return false; });});
Как скрыть "кнопку вверх" на мобильных устройствахМногие веб-мастера скрывают "кнопку вверх" при отображении сайта на мобильных устройствах из-за её ненадобности. Для скрытия кнопки "scroll to top" в мобильных устройствах используется css медиа запрос @media (прописывается все в том же css файле style.css):
@media only screen and (max-width: 568px) { #arrowup {display: none;} }
Плавная прокрутка для сайта реализована на jQuery. Кнопка прокрутки появляется на странице, когда положение полосы прокрутки браузера достигает установленного в коде нужного значения (код приведен ниже), другими словами – кнопка появится только тогда, когда пользователь прокручивает страницу немного вниз.
Этот код лучше вставить в самом низу страницы, перед закрывающимся тегом . В css для #back-top объявляем свойство position: fixed и позиционируем в правую нижнюю часть страницы. Элемент span нужен только для отображения стрелки, он не обязателен и его можно удалить, если вам не нужна графическая стрелка на кнопке.
2. CSS – разметка #wrapper{ margin:0 auto; width:900px; position:relative; } /*Стилизация кнопки ВВЕРХ */ #back-top{ position:fixed; bottom:30px; left:50%; margin-left:500px } #back-top a{ width:64px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; color:#bbb; /* background color transition */ -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover{color:#000;} /* графическая стрелка ВВЕРХ */ #back-top span{ width:64px; height:64px; display:block; margin-bottom:7px; background:#ddd url(up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; /* background color transition */ -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover span{background-color:#777} 3. JavascriptПервым делом подключаем библиотеку . Для этого перед закрывающемся тегом head вставляем код:
Далее приведен код, который можно вставить в тело страницы или вывести в отдельный javascript файл. Скрипт сравнивает положение scrollTop скроллбара окна со значением 100 (значение указано в пикселях и его можно поменять на другое), если больше 100, то кнопка плавно появляется, иначе затухает.
$(document).ready(function(){ // появление/затухание кнопки #back-top $(function (){ // прячем кнопку #back-top $("#back-top").hide(); $(window).scroll(function (){ if ($(this).scrollTop() > 100){ $("#back-top").fadeIn(); } else{ $("#back-top").fadeOut(); } }); // при клике на ссылку плавно поднимаемся вверх $("#back-top a").click(function (){ $("body,html").animate({ scrollTop:0 }, 800); return false; }); }); });
Также обратите внимание на случай, если будет выключен javascript в браузере пользователя. Чтобы предусмотреть поведение стрелки и в этой ситуации необходимо к элементу body добавить id=”top”, а в ссылку к кнопке добавить якорь: , который является id тега body. Т.е. при выключенном javascript будет происходить просто скачок в начало страницы без анимации.
Архив с исходником можно забрать .
Если вы столкнулись с какой-то проблемой по установке этого скрипта отпишитесь в комментариях о возникшей проблеме и ответ не заставит себя долго ждать.
Кроме этого, за отдельную плату, можете заказать установку этого скрипта на свой сайт. Для этого напишите заявку по любому из адресов, указанных на странице контактов или через форму обратной связи. Скрипт будет установлен аккуратно, без опасности повредить что-нибудь на вашем сайте!
