Всем доброго времени суток. Сегодня речь пойдет о модальных окнах, и на их примере мы реализуем кнопку «Заказать обратный звонок «. Наверняка вы видели на множестве лендингов такую кнопку, при нажатии на которую появляется контактная форма с затемнением общего фона. Именно такой функционал мы и реализуем сегодня.
Обычно кнопку «заказать обратный звонок» располагают в правом верхнем углу. Можете поэкспериментировать с расположением, но помните о том, что люди уже привыкли видеть этот элемент именно там, хотя, — это больше относится к сайтам бизнес тематики и услуг.
Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.
И напоследок, скажу, что я не заморачивался с дизайном контактной формы, просто хотел передать суть того, как реализуется подобный эффект, так что прошу сильно не пинать. Просто опишу основные моменты, а вы потом подправите, как вам будет угодно.
О том, как настроить контактную форму можно почитать в этих статьях:
Для того, чтобы статья не получилась очень длинной, я приведу только html разметку, а остальное вы сможете посмотреть, скачав исходник.
Будем реализовывать такой функционал: :)
Еще раз повторюсь — это просто небольшой шаблончик, который вы потом подправите под свой дизайн. Вызываться это все будет нажатием на кнопку.
Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.
Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:
Заказать обратный звонок
Теперь нужно создать контейнер модального окна:
содержимое модального окна
Оставьте ваш телефон
и наш консультант свяжется с вами
Не стал публиковать таблицу стилей, можете скачать исходник здесь:
А с html разметкой — все. Так вот просто. Преимущества этого способа в том, что модальное окно можно вызывать несколько раз на странице и в том, что не используются скрипты.
Как вы могли заметить, я написал, что использовал less. Посмотрите на структуру. Я не использовал и 5% от возможностей препроцессора (только вложенность), так как только начал изучать его, но планирую в будущем чаще применять. Вот хотел спросить у вас, как лучше. Не против ли вы, если примеры кода будут не в CSS а less? У меня Google chrome и Яндекс браузер отказались компилировать less в css без открытия файла через Денвер или OpenServer. На Мазила и IE — проглотили. Так что, скорее всего, буду выкладывать обычные CSS стили.
А на сегодня — все! Всем пока!
Если нет желания создавать подобную кнопку самому, рекомендую обратить внимание на , которые позволяют реализовать эту функцию и имеют много других дополнительных возможностей.
Материальный Дизайн - это язык дизайна, введенный Google год назад, представляющий из себя смелую попытку компании создания объединенного пользовательского опыта на всех устройствах и платформах. Это отмечено смелыми цветами, либеральным, но принципиальным использованием теней для обозначения уровней UI и плавную анимацию, которая обеспечивает довольно хороший опыт взаимодействия в Android (и некоторых приложениях Google на iOS).
Однако одна вещь в Материальном Дизайне, напрягает меня с тех пор, как в прошлом году она была введена: Плавающая кнопка действия.
FABs (Floating action button), согласно Google, это круглые кнопки, которые парят над UI и «используются для способствования действию». Они выступают в качестве кнопки призыва к действию, предназначенных для выполнения того действия, которое пользователи производят на этом экране чаще всего.
И из-за смелого визуального стиля Материального Дизайна, FAB довольно трудно игнорировать – и в этом заключается проблема. В то время как на практике, в идеальных условиях, FAB кажется, обеспечивает хороший UX, — злоупотребление FAB будет вредно для UX приложения в целом. Вот несколько тому причин.
Эффект погружения исходит из опыта
FAB выделяются визуально - они буквально сверху любого элемента UI на экране. Также, добавление FAB автоматически привело бы к менее иммерсивному UX, особенно влияя на приложения (или экраны) целями которых является обеспечить интерактивный эффект.
Один пример – новое фото приложение от Google.
Фото приложение открывается в виде галереи с плавающей кнопкой поиска. Но дело в том, что когда я открываю фото приложение, я просто хочу… посмотреть свои фотографии. Таким образом, плавающая кнопка поиска отвлекает пользователя от погружения в просмотр фотографий, который является основной целью приложения. Представленный, умный поиск – уникальная функция фото приложения Google. Но значит ли это что ему нужно дать высший уровень, постоянного FAB в приложении? (Я думаю нет.)
Как ни странно, Google со мной согласен. На странице Материального Дизайна посвященной FABs Google объясняет, что «не каждый экран нуждается в плавающей командной кнопке».
И затем добавляет, что “основное действие это коснуться изображения в галерее, в этом случае кнопка не нужна.
Это может показаться другой стороной медали, но есть другое, более важное свойство FАB стоящее на пути его полезности. Занимая место на экране, FAB фактически блокирует контент.
Ну да ладно, FAB же это просто маленькая круглая кнопочка, да? Сколько контента она может заблокировать?
Если вы посмотрите на скриншот фото приложения, то поймете, что поисковая FAB блокируют приблизительно 50 процентов уменьшенного изображения – безусловно достаточно чтобы закрыть пару лиц. Это по сути создает необходимость в одной дополнительной прокрутке, на каждое четвертое уменьшенное изображение последнего ряда на экране. И это еще не самое плохое.
FAB блокирует кнопку «Favorites» и дату.
Пользователь Dumazy разместил пост на Graphic Design Stack Exchange о проблеме, с которой он столкнулся, когда FAB заблокировал звездочку «избранного», а также время на экране его приложения. Это иллюстрирует проблему всех приложений со списковым представлением, и это становится особенно проблематичным, когда последний пункт в списке не может прокручиваться дальше вверх. Это означает, что целая колонка, должна быть принесена в жертву (меняя местоположение звездочки, и т.д.), чтобы предоставить надлежащее удобство использования экрана.
Следовательно, FAB занимает намного больше пространства на экране, чем предлагает его размер.
Способствование действию скорее всего так часто не используется.Проэктируя UX, нужно помнить правило 80/20, которое говорит о том, что пользователи будут использовать 20% особенностей 80% времени. Другими словами, большая часть усилий должна быть применена к проектированию того небольшого количества элементов, которые пользователи будут использовать большую часть времени.
FAB фактически это и делает – в теории. Но что, если «Способствование действию» не используется так часто?
Возьмите, например, приложение Google Gmail.
FAB Gmail приложения - это кнопка создания, которая предполагает, что основное действие пользователей - это создание письма.
Но так ли это?
Многократные исследования показали, что по крайне мере 50 % писем читаются на мобильном устройстве, и почти ни одно не говорит такого о создании электронных писем. Другими словами, как подтвердил бы наш ежедневный опыт, большинство пользователей мобильных устройств склонны использовать свои почтовые приложения чтобы читать электронные письма.
Возможно, какое-то количество людей использует мобильные устройства что бы отвечать на письма, но это происходит только после открытия письма (обратите внимание на то, что это означает, что они обойдут FAB). Такое поведение пользователей, вероятно вызванное довольно несовершенным механизмом ввода виртуальных клавиатур и авто заменой, означает, что основное действие которое выполняют пользователи, это чтение (и ответ) электронных писем, а не создание новых.
Итак, что делает FAB кнопка «создать письмо»? В редких случаях, она доставляет удовольствие пользователям, когда они хотят создать письмо, при помощи этого приложения. Но в остальное время, она только занимает место на экране, блокирует «звездочку» и время, и постоянно отвлекает ярким красным цветом.
Хотим ли мы FAB? Вычеркнуть предыдущее – нужен ли он нам вообще?Конечно, не все применения FAB ухудшают опыт использования Материальных приложений. Есть некоторые яркие примеры FABs, которые имеют смысл, и которые улучшают UX этих приложений.
Карты Google это отличный пример правильно примененного FAB. Главное действие, выполняемое пользователями на Картах, это получение направлений, таким образом, очень правильно использовать FAB именно для этой цели.
Но учтите, что Карты довольно особый случай, когда пользователи контента заинтересованы почти всегда в попадании в центр экрана (где и находится Ваша синяя точка, отмечающая положение). В большинстве приложений, однако, сетка или списковое представление означают, что пользователи взаимодействуют с содержанием, расположенным везде на экране, включая те места, где обычно расположены FAB.
Учтите также, что скриншоты выше рассказывают только часть истории: при фактическом использовании, FABs остаются на месте, даже когда пользователь использует прокрутку (большую часть времени). Как Google неоднократно подчеркивал в Материальном Дизайне, — дизайн движения так же важен как дизайн UI.
Отсутствие движения – акцентирование на экранном пространстве – в контексте движущегося содержания создает более высокий уровень отвлечения, которое скриншотами никак не показать.
Итак, поскольку у нас почти нет примеров хорошей реализации FAB, то напрашивается вопрос: нужны ли они?
Когда мы смотрим на недостатки наличия FABs в приложениях, мы можем свести это к простому пониманию: пользователи не только выполняют действия в приложениях, они также потребляют содержание.
Дизайн FAB в Материальном дизайне основывается на предпосылке, что пользователи большую часть времени выполняют определенное действие, и, следовательно, ему должен быть предоставлен повышенный статус в виде главной, высокоуровневой кнопки. Но во многих приложениях, пользователи также сосредоточены на потреблении содержания: в фото приложении пользователи хотят рассмотреть фотографии; в приложении Gmail пользователи хотят прочитать свои электронные письма; и в приложении Facebook, пользователи хотят прочитать сообщения своих друзей.
FAB, таким образом, философия дизайна (или по крайней мере выбор дизайна), которая подчиняет оптимальное потребление содержания совершению действия. И мы должны спросить себя: необходим ли такой компромисс? Хотим ли мы вообще идти на такой компромисс?
Когда FABs большую часть времени приводит к ухудшению UX, когда трудно выяснить единственное наиболее используемое действие в рамках приложения, и когда приходится находить окольные пути (когда FAB исчезает при прокрутке или накладывается на другие элементы при пролистывании) я сказал бы, что ответ — нет.
Материальный Дизайн Google, довольно хороший объединенный, принципиальный язык дизайна, но FAB далеко не самое в нем лучшее.
Приветствую дорогие друзья. Сегодня я покажу, как сделать кнопку наверх на сайте. Так уж получилось, что шаблон моего блога не был изначально снабжен этой полезной функцией, и посетители не могли быстро переместиться из нижней части статьи в верхнюю. Поэтому, одновременно с созданием такой кнопки у себя, я расскажу как это сделать вам (Может быть у вас такая же проблема и вы не знали как ее решить).
В статье будут следующие части:
Для чего нужна эта кнопка?Сказать откровенно, миллионы живут без подобной кнопки. Ничего критичного в её отсутствии нет, но применение этого элемента может принести определенную пользу, как для посетителей, так и для вас, как для владельца ресурса.
Польза для посетителейСтраницы сайтов нередко перегружены контентом. Длинные и подробные статьи заставляют посетителей спускаться все ниже и ниже, прокручивая текст колесиком мыши. В самом конце их ожидают еще и десятки комментариев и для того, чтобы добавить свои, им приходится проделать еще больше работы.
Пока мы заняты чтением, такая прокрутка не особо утомляет. Но возвращаться назад уже не так весело и, вместо того, чтобы вернуться вверх и погулять по другим разделам вашего сайта, пользователь просто закрывает его.
Использование стрелки вверх для сайта, позволяет сделать возвращение к верхнему меню быстрым и комфортным.
Польза для сайтаПольза для сайта вытекает напрямую из предыдущего текста. Кнопка упрощает навигацию по страницам и улучшает поведенческие факторы для вашего ресурса, так как пользователи ведут себя более активно и больше внимания отдадут вашим материалам.
В свою очередь, удобная навигация и хорошие поведенческие факторы приводят к росту авторитета в глазах и, соответственно, к росту позиций в результатах поиска.
Простая кнопка наверх для сайта htmlЯ рассмотрю два способа снабдить ваш сайт такой кнопкой. Первый будет ориентирован на простые сайты, для которых нет возможности или желания подключать какие-либо дополнительные библиотеки или Javascript.
Для реализации будет достаточно стандартного функционала языка разметки HTML, дополненного CSS стилями. Кнопка вверх будет действовать как обычная ссылка, отправляющая посетителя к началу страницы.
Достоинства:
- Простота и легкость настройки;
- Не нужна поддержка библиотек и скриптов.
Недостатки:
- Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
- Перемещение вверх происходит не плавно, а мгновенно, рывком.
Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.
Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).
< a href = "#" title = "Вернуться наверх" class = "buttonup" > < img src = "путь к картинке/картинка.png" > < / a > |
Buttonup { width:88px; height:118px; position:fixed; bottom:20px; right:50px; }
Buttonup { width : 88px ; height : 118px ; position : fixed ; bottom : 20px ; right : 50px ; |
Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.
Плавающая кнопка наверх для сайтаИтак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:
- Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
- Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
- Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).
Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).
В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:
1. Подключение библиотеки jQueryЕсли вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.
Для подключения библиотеки jQuery, вам нужно прописать в разделе вашего сайта следующую строку:
|
Код скрипта можно вставить двумя способами:
- либо поместить его целиком между тегами ,
- либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.
Первый вариант проще, второй, на мой взгляд, удобнее.
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(); });
jQuery (document ) . ready (function ($ ) { $ ("" + ".scrollTop{ display:none; z-index:9999; position:fixed;" + "bottom:20px; left:90%; width:88px; height:125px;" + "background:url(https://сайт/img/arrow.png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" + "" ) . appendTo ("body" ) ; 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. Для его подключения в заголовке сайта прописываем вот такую строчку:
Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.
Здравствуйте, уважаемые посетители!
Я продолжаю публиковать статьи технической тематики.
И сегодня я затрону интересную тему, в которой мы обсудим кнопку прокрутки вверх страницы на сайте. Мы поговорим о важности данной кнопки, как я люблю это делать. Также покажу наиболее интересные и эффективные реализации этой функции.
Нужна лиЯ думаю, что не стоит показывать, как она выглядит на сайтах, так как почти на каждом ресурсе она есть. Это простая кнопка со стрелкой вверх или со словом, при нажатии на которую вы быстро перемещаетесь в самую верхнюю область сайта.
Данная функция - это некий элемент, который в определенных случаях улучшает юзабилити сайта. Вот в каких случаях, мы сейчас с вами и разберем.
Первый самый важный, а может и единственный случай, когда кнопка вверх нужна - это наличие огромного количества контента на странице. Если страница длинная, то довольно затруднительно ее листать в самый верх.
Приходится либо пользоваться полосой прокрутки, чем пользуются малое количество людей. Я по крайней мере ей вообще не пользуюсь, так как это лишние движение мышки, да и не очень удобно. Либо же приходится крутить ролик на мышке, что очень долго и со временем напрягает.
Поэтому, если на вашем сайте действительно большие статьи, то кнопку можно и установить, но сделать ее нужно такой, чтобы на нее было легко нажать и сделать это было проще, чем крутить ролик или воспользоваться полосой прокрутки в браузере. В другом случае, какой от нее будет толк, если она будет равнозначна стандартным действиям?
Исходя из этого имеются наиболее распространенные и самые действенные кнопки прокрутки вверх, которые действительно эффективно работают. Один из таких вариантов - это кнопка вверх, как в социальной сети Вконтакте. К реализации этого способа мы и переходим.
Кнопка вверх, как ВконтактеОтличительной чертой данной кнопки является ее простота в использовании. Она имеет вид полосы прокрутки в левой части сайта, которая занимает всю высоту ресурса.
Такой вариант уже зарекомендовал себя, так как практически нет пользователей, которые ей не пользуются в соц. сети Вконтакте. Удобна данная реализация тем, что не приходится целиться курсором мышки на какую-то кнопку. Достаточно просто кликнуть на левую область сайта и страница прокрутится в самый верх. Нет необходимости даже следить за курсором, можно просто двинуть мышью в самый край экрана и кликнуть один раз.
Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант - запросто.
Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.
Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле 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 > |
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows
Резервное копирование и восстановление драйверов Windows