В этом посте мы с вами сделаем кнопку “Наверх”, ее суть – это появится при прокрутке сайта вниз и при нажатии на ее, отправить пользователя на верх текущей страницы. Думаю объяснять много не стоит мы все встречали подобные кнопки “наверх” на многих сайтах.
План по созданию кнопки “Наверх”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 эффекты описанные в этом посте
Кнопка «Вернуться Наверх» или « » популярный и полезный элемент на страницах современных сайтов, особенно в тех случаях, когда на этих страницах размещено много контента.
Прежде всего, такие в целом улучшают юзабилити сайта. Когда пользователь ознакомившись с большим количеством контента, прокрутив страницу до самого низа, чтобы вернуться в верхнюю часть сайта, использует стандартный скролинг. Чтобы пользователь перенаправлялся в верхнюю часть страницы автоматически, разработчики и админы сайтов, думающие о своих посетителях, как раз и используют различные вариации кнопок «Вернуться Наверх». Это могут быть самые простые решения без задействования каких-либо дополнительных библиотек или скриптов, а так же с расширенным функционалом, с подключением библиотеки и небольшого исполняющего скрипта.
Оформляют кнопки «Наверх» по-разному, это могут быть и банальные текстовые ссылки, и классического вида кнопки, круглые кнопки со стрелкой или же используют картинку соответствующего типа. Чаще всего эти кнопки выглядят статично, иногда используется изменение цвета фона и шрифта при наведении, реже разработчики применяют анимационные эффекты.
Сегодня, на простом примере, рассмотрим, как с помощью анимации 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 , дабы исключить некорректное отображение анимации в этих веб-браузерах.
На этом всё. Ещё раз просмотрите живой пример работы кнопки «Вернуться наверх» и если оно вам надо, скачивайте исходники упакованные в архив и выложенные в облако на Я.Диске.
С Уважением, Андрей
Кнопка вверх для сайта - более 7 проверенных решений - 3.5 out of 5 based on 109 votes
Кнопка "Вверх" играет большую роль в улучшении удобства пользователя, особенно на тех страница которые сильно нагромождены контентом. А так как в настоящее время контент для сайта самое главное, то его на страницах, как правило, становится все больше и больше и самым лучшим способом перенаправить посетителя вверх страницы являются различные специальные кнопки, как сделать кнопку наверх для своего сайта мы рассмотрим в данной статье.
Для чего нужна данная кнопка и в каких случаях ее лучше всего использоватьКогда на странице сайта расположено большое количество контента пользователь ознакомившись с ним и промотав страницу до определенного момента или до самого низа, часто начинает скролить ее верх, чтобы увидеть навигационные ссылки расположенные в верхней части страницы и\или произвести какие-то действия.
Чтобы добавить удобства пользователям и в целом улучшить юзабилити своего сайта лучше всего использовать для сайта кнопку вверх, нажав на которую пользователь автоматически перенаправляется в верхнюю часть страницы.
1. Простая кнопка "Наверх" без JavaScriptСуществует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
^Наверх
Пример 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 могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.
Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.
Плюсы данного вида кнопки:
Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.
2. Кнопка наверх с помощью jQueryКнопка реализована достаточно просто. Для ее функционирования понадобится библиотека jQuery, небольшой скрипт содержащий события jQuery, определенные стили и тег DIV содержащий сам текст и необходимый ID.
Кнопка работает в браузерах начиная с версий Firefox 3.0.10 - 3.6.13, Internet Explorer 7 и 8, Google Chrome, Jquery 1.4.3. К сожалению кнопка не работает в IE 6, а оно вам надо:) ?
JQuery JavaScript код:
Представленный ниже код вам необходимо вставить переде тегом на всех страницах вашего сайта. Если библиотека jQuery уже подключена к вашему сайту, то первую строчку добавлять не нужно.
$(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $("#toTop").fadeIn(); } else { $("#toTop").fadeOut(); } }); $("#toTop").click(function() { $("body,html").animate({scrollTop:0},800); }); });
Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.
#toTop { width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* отступ кнопки от нижнего края страницы*/ right:10px; cursor:pointer; display:none; color:#333; font-family:verdana; font-size:11px; }
Для вызова кнопки добавьте следующий HTML код перед тегом .
^ Наверх
3. UItoTop JQuery плагинПростой плагин делающий плавное появление кнопки и плавный скроллинг вверх при нажатии на ее. Чтобы задействовать плагин на своем сайте нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить все необходимые файлы плагина и он будет работать.
Исходники
В представленном архиве находится 3 папки: css - файл стилей кнопки, img - изображение и папка js в которой находятся 4 JavaScript файла.
Подключение JavaScript файлов:
Распакуйте скачанный архив с исходниками в какую либо папку вашего сайта. Для задействования плагина нам достаточно подключить три из имеющихся js файлов. Для их подключения перед закрывающим тегом добавьте следующие пути к файлам:
$(document).ready(function() { /* var defaults = { containerID: "toTop", // fading element id containerHoverID: "toTopHover", // fading element hover id scrollSpeed: 1200, easingType: "linear" }; */ $().UItoTop({ easingType: "easeOutQuart" }); });
Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.
Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:
Добавление CSS:
Следующий шаг это добавление CSS стилей, без них кнопка не заработает. Подключить их можно двумя способами.
Первый способ это добавить на все страницы вашего сайта между тегами ссылку на CSS файл стилей:
Не забудьте только изменить путь к файлу.
Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.
4. Кнопки прокрутки вверх и вниз на JQUERYДанное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают. Этот эффект вы можете увидеть просмотрев демо.
Исходники
В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.
Подключить HTML:
Для начала нужно разместить HTML код вызова кнопок, на всех страницах сайта. Для этого поместите нижерасположенный текст сразу перед тегом .
Подключение JavaScript:
Сразу после HTML кода, перед тегом разместите код вызова необходимых JavaScript файлов и JQuery код.
$(function() { var $elem = $("#content"); $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn("slow"); $(window).bind("scrollstart", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"0.2"}); }); $(window).bind("scrollstop", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"1"}); }); $("#nav_down").click(function (e) { $("html, body").animate({scrollTop: $elem.height()}, 800); }); $("#nav_up").click(function (e) { $("html, body").animate({scrollTop: "0px"}, 800); }); });
Пути ведущие к JS файлам необходимо заменить на свои.
В первой строчке кода подключается библиотека JQuery, поэтому если ранее вы уже ее подключали к своему сайту, то ее необходимо убрать.
Далее следует подключение еще одного JS файла и код содержащий определенные функции, которые необходимо рассмотреть подробнее. Потому как про помощи их можно изменять некоторые параметры работы кнопок. Ниже приведен код с разъяснениями:
// content - это идентификатор того дива внутри которого должно лежать все содержимое, которое должно прокручиваться, если все содержимое страниц вашего сайта лежит в другом id, то можете его сюда вписать, т. к. без этого кнопки работать не будут $(function() { var $elem = $("#content"); // при помощи следующих двух строчек производится показ кнопок $("#nav_up").fadeIn("slow"); $("#nav_down").fadeIn("slow"); // при прокрутке у кнопок появляется эффект затухания, реализовано это изменением их прозрачности, поэтому меняя показатель 0,2 в диапазоне от 0,1 до 1 можно регулировать их прозрачность $(window).bind("scrollstart", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"0.2"}); }); // здесь можно регулировать ту же прозрачность, но уже в тот момент когда кнопки просто отображаются на странице, по умолчанию значение - 1 $(window).bind("scrollstop", function(){ $("#nav_up,#nav_down").stop().animate({"opacity":"1"}); }); // изменяя число 800 можно увеличивать или уменьшать скорость прокрутки страницы вверх $("#nav_down").click(function (e) { $("html, body").animate({scrollTop: $elem.height()}, 800); }); // то же, что и выше но для прокрутки вниз $("#nav_up").click(function (e) { $("html, body").animate({scrollTop: "0px"}, 800); }); });
Подключение CSS:
Для того, чтобы добавить CSS просто подключите к страницам сайта файл style.css, находящийся в архиве с исходниками:
А самым лучшим вариантом будет скопировать стили этого файла и вставить их в файл стилей своего сайта.
5. Кнопка плавной прокрутки вверх при помощи JQueryЕще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.
Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.
Теперь разберемся, что нужно сделать для подключения кнопки к сайту
Изображение:
Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:
Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:
Наверх
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:
$(document).ready(function(){ $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(".scrollup").fadeIn(); } else { $(".scrollup").fadeOut(); } }); $(".scrollup").click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); });
Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.
Как вы видите есть еще два параметра - 0 - значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 - это скорость анимации в миллисекундах.
Источник: http://gazpo.com/2012/02/scrolltop/
6. Анимированная кнопка перехода вверхПри прокрутке страницы на определенное количество символов вниз, слева в нижней части появляется большая кнопка со стрелочкой. При наведении курсора кнопка плавно загорается, а при клике происходит плавная прокрутка вверх.
Для создания кнопки используется изображение стрелки, CSS стили и JQuery.
Изображение:
HTML код:
Для вызова кнопки используется следующий HTML код:
Back to Top
Но помещать его нужно непосредственно перед основным содержимым страницы, если поместить его перед закрывающим тегом , то кнопка не будет работать.
И еще один важный момент, касающийся HTML кода. Тегу вы должны присвоить идентификатор top.
В случае если тегу уже присвоен определенный id, тогда в коде вызова кнопки, размещенном чуть выше, #top нужно заменить на #ваш-id
При помощи CSS заданы отступы и внешний вид кнопки, добавлено свойство transition: для создания эффекта задержки при наведении курсора. Вставлять его лучше в CSS файл вашего сайта.
#back-top { position: fixed; bottom: 30px; margin-left: -150px; } #back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* arrow icon (span tag) */ #back-top span { width: 108px; height: 108px; 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; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #777; }
$(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); // scroll body to 0px on click $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }); });
Первая строчка это подключение библиотеки JQuery, если у вас она уже подключена, то эту строчку не добавляйте. Остальной код добавьте между тегами ...
При необходимости можете изменить следующие параметры:
- 100 - это количество пикселей, после прокрутки которого появляется кнопка;
- 0 - это значит что прокрутка будет производится до нулевого пикселя т. е. до самого верха.
- 800 - это скорость прокрутки в миллисекундах.
Большая полупрозрачная кнопка вверх появляющаяся при скроллинге по центру страницы. Не заметить ее трудно. Сделана только при помощи JQuery и CSS.
Разбираемся с HTML:
Для работы кнопки основное содержимое страницы, которое должно прокручиваться, необходимо поместить между двумя тегами:
Здесь ничего особенного нет, просто вставьте данный код в файл CSS стилей вашего сайта.
#message a { /* display: block before hiding */ display: block; display: none; /* link is above all other elements */ z-index: 999; /* link doesn"t hide text behind it */ opacity: .8; /* link stays at same place on page */ position: fixed; /* link goes at the bottom of the page */ top: 100%; margin-top: -80px; /* = height + preferred bottom margin */ /* link is centered */ left: 50%; margin-left: -160px; /* = half of width */ /* round the corners (to your preference) */ -moz-border-radius: 24px; -webkit-border-radius: 24px; /* make it big and easy to see (size, style to preferences) */ width: 300px; line-height: 48px; height: 48px; padding: 10px; background-color: #000; font-size: 24px; text-align: center; color: #fff;
$(function () { /* set variables locally for increased performance */ var scroll_timer; var displayed = false; var $message = $("#message a"); var $window = $(window); var top = $(document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { if($window.scrollTop() 50) { $("#button-up").fadeIn(); } else { $("#button-up").fadeOut(); } }); /** При нажатии на кнопку мы перемещаемся к началу страницы */ $("#button-up").click(function () { $("body,html").animate({ scrollTop: 0 }, 500); return false; }); });
Вот и все, кнопка готова к использованию. Также вначале не забудьте подключить фреймворк jQuery.
Приветствую дорогие друзья. Сегодня я покажу, как сделать кнопку наверх на сайте. Так уж получилось, что шаблон моего блога не был изначально снабжен этой полезной функцией, и посетители не могли быстро переместиться из нижней части статьи в верхнюю. Поэтому, одновременно с созданием такой кнопки у себя, я расскажу как это сделать вам (Может быть у вас такая же проблема и вы не знали как ее решить).
В статье будут следующие части:
Для чего нужна эта кнопка?Сказать откровенно, миллионы живут без подобной кнопки. Ничего критичного в её отсутствии нет, но применение этого элемента может принести определенную пользу, как для посетителей, так и для вас, как для владельца ресурса.
Польза для посетителейСтраницы сайтов нередко перегружены контентом. Длинные и подробные статьи заставляют посетителей спускаться все ниже и ниже, прокручивая текст колесиком мыши. В самом конце их ожидают еще и десятки комментариев и для того, чтобы добавить свои, им приходится проделать еще больше работы.
Пока мы заняты чтением, такая прокрутка не особо утомляет. Но возвращаться назад уже не так весело и, вместо того, чтобы вернуться вверх и погулять по другим разделам вашего сайта, пользователь просто закрывает его.
Использование стрелки вверх для сайта, позволяет сделать возвращение к верхнему меню быстрым и комфортным.
Польза для сайтаПольза для сайта вытекает напрямую из предыдущего текста. Кнопка упрощает навигацию по страницам и улучшает поведенческие факторы для вашего ресурса, так как пользователи ведут себя более активно и больше внимания отдадут вашим материалам.
В свою очередь, удобная навигация и хорошие поведенческие факторы приводят к росту авторитета в глазах и, соответственно, к росту позиций в результатах поиска.
Простая кнопка наверх для сайта htmlЯ рассмотрю два способа снабдить ваш сайт такой кнопкой. Первый будет ориентирован на простые сайты, для которых нет возможности или желания подключать какие-либо дополнительные библиотеки или Javascript.
Для реализации будет достаточно стандартного функционала языка разметки HTML, дополненного CSS стилями. Кнопка вверх будет действовать как обычная ссылка, отправляющая посетителя к началу страницы.
Достоинства:
- Простота и легкость настройки;
- Не нужна поддержка библиотек и скриптов.
Недостатки:
- Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
- Перемещение вверх происходит не плавно, а мгновенно, рывком.
Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.
Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).
Buttonup { width:88px; height:118px; position:fixed; bottom:20px; right:50px; }
Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.
Плавающая кнопка наверх для сайтаИтак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:
- Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
- Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
- Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).
Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).
В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:
1. Подключение библиотеки jQueryЕсли вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.
Для подключения библиотеки jQuery, вам нужно прописать в разделе вашего сайта следующую строку:
2. Подключение скрипта, выводящего кнопку
Код скрипта можно вставить двумя способами:
- либо поместить его целиком между тегами ,
- либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.
Первый вариант проще, второй, на мой взгляд, удобнее.
jQuery(document).ready(function($){ $(""+ "..png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" +"").appendTo("body"); var speed = 550, $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //появление function show_scrollTop(){ ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });
Если вы будете использовать для скрипта отдельный файл, как это сделал я, то в него помещаете код, находящийся между тегами , сами теги копировать в файл не нужно. Файл размещаете у себя на хостинге.
Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:
Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.
Картинка для кнопки
Для того, чтобы изображение кнопки менялось, файл картинки должен состоять из двух половинок, на одной изображается обычная стрелка, на другой активная стрелка (под наведенным курсором). Посетителю одновременно показывается только одна половина. У меня верхняя стрелка сделана полупрозрачной, вторая непрозрачная (яркая).
Заданные цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.
Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.
Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.
Код можно упростить, если удалить из него вот эту строку:
+ ".scrollTop:hover{ background-position:0 -133px;}"
Она отвечает за изменение отображаемой части картинки при наведении курсора и если ее убрать, то кнопка всегда будет выглядеть одинаково. В этом случае вам не нужна будет картинка с двойным изображением, поставьте любую стрелку.
Несколько вариантов стрелок я сделал, а в интернете вы можете отыскать много готовых.
Как видите, несложно. На этом на сегодня все.
