Как сделать стрелку вверх css
Как сделать стрелку вверх css
При выборе из разных вариантов исполнения плавающей стрелочки, выработались требования, которые я хотел бы видеть в этом необходимом для сайта элементе.
Мои критерии для ScrollUp:
Для начала нарисуем стрелку:
Вы, наверное, сразу заметили, что для самой стрелочки используется символ из шрифта FontAwesome « «. Подключим его с CDN Google вместе с JQuery:
Часто на сайтах, использующие библиотеку bootstrap и стрелку скроллинга Scroll to Top делают на нем. Меня такой подход не устраивает т.к. есть разные сайты, на которых эта библиотека подключена и такие, где она не используется. Сама библиотека довольно тяжелая и прилично замедляет загрузку сайта и я не хотел бы зависеть от ее наличия. Тем более, есть планы полностью отказаться от ее использования в пользу более легких специализированных решений. От чего отказаться лично для меня не удастся, так это от библиотеки JQuery. Сама JQuery разных версий имеется практически на всех имеющихся у меня сайтах и поэтому было решено использовать ее.
Как использовать JQuery
На многих сайтах с помощью Java Script и JQuery выполнено именно плавное появление стрелки. Код при этом получается похожий на этот:
JQuery для анимации плавного появления объекта с классом «.scroll-top» (это стрелка и есть) к нему последовательно добавляется style=»opacity:0.0001;» до style=»opacity:1;». Мне такое решение не нравится не только тем, что код в момент всех этих переборов нагружает страницу и на слабых компьютерах может подтормаживать, но также и тем, что при любой ошибке в скриптах на странице стрелка или не появляется совсем или висит видимая постоянно. Сам же блок со стрелкой должен иметь такое свойство: style =» display: none; «, которое после всех этих переборов прозрачности меняется на style =» display: block; «. Но вернемся к этому позже, а сейчас соберем все вместе и посмотрим, что у нас получилось.
Код плавной прокрукрутки вверх выглядит так:
Добавляем в качестве фона картинку и собираем код:
body <
background-image: url(construct-bg.jpg);
background-position: left top;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
>
Фоновую картинку с именем construct-bg.jpg нужно положить в ту же папку, в которой находится наш html файл.
Что нужно чтобы заработало локально на компьютере:
Должна открыться страница с нашей картинкой в качестве фона. При прокрутке ее вниз больше, чем на 100px, плавно появляется стрелочка и также плавно исчезает, если страницу прокрутить вверх. При клике по стрелочке, страница плавно прокручивается вверх и стрелочка исчезает. Абзацы с номерами строк я специально добавил, чтобы увеличить размер страницы по высоте — так наглядно видно что прокручивать и удобно следить за появлением/исчезновением стрелки.
Что можно улучшить
Самое первое — не подключать полную библиотеку шрифтов FontAwesome, которая занимает, если ее скачать на компьютер 13 мегабайт. Конечно, если она уже подключена на Вашем сайте, ничего делать с ней не нужно, но замедлять загрузку легкого сайта из-за нескольких символьных значков нет никакого желания. К счастью, есть проект Fontello, который позволяет собрать свой собственный шрифт, состоящий только из выбранных символов. Был собран шрифт из 10 символов fontawesome-webfont-custom-10.ttf, который занял всего 7кБ.
Скрипт плавной прокрутки лучше разместить прямо в кнопке чтобы он срабатывал по событию onclick.
Для улучшения совместимости обращение к функциям библиотеки со значка «$«, который не поддерживается в прежних версиях JQuery, лучше заменить на «jQuery«, которое поддерживается всеми версиями. Саму библиотеку же будем загружать локально, что позволит настроить браузерное кеширование для улучшения результатов теста Google PageSpeed Insights. Кстати, стили и дополнительные короткие скрипты я специально не выносил во внешние файлы не только для упрощения кода и улучшения его наглядности, но также следуя рекомендациям Google. Для ускорения загрузки короткие скрипты и небольшие, но постоянно используемые стили поисковик сейчас рекомендует располагать именно в коде страницы, не вынося их во внешние файлы, что уменьшает количество обращений к серверу при загрузке страницы и сокращает ожидание ответов. Из этих же соображений, несколько пожертвовав наглядностью, я немного сжал стили, удалив из них пробелы и лишние отступы. Отступ после каждой фигурной скобки «< » остался для совместимости с библиотекой Smarty и вы можете его убрать, если не используете его в своих проектах.
Из эстетических соображений добавим анимацию стрелки при наведении на нее стрелки мыши, а также при нажатии:
Итак, новый улучшенный код страницы выглядит следующим образом:
Саму стрелочку сделал нейтральным серым цветом. В любое время можно поменять ее оттенок — он задается в стилях свойством background:#555;/* background — цвет кнопки*/ стиля .scrollToTop. Стрелка появляется после прокрутки страницы более чем на 1/3 высоты экрана.
Вверху странички вывел значки своего 10-ти символьного шрифта, собранного из символов FontAwesome. Этого набора мне показалось достаточно для использования на сайте интернет-магазина. Если вы используете еще какие-то символы, предложите в комментариях к этой статье — и я добавлю их в этот модифицированный шрифт.
«Идеальная стрелочка» не лишена недостатков. Один из которых — в невидимом состоянии она не исчезает полностью, а только становится прозрачной. При клике по ней (если знать куда кликать) даже срабатывает плавный скроллинг. Но на мой взгляд, это не такой уж и большой недостаток. Если вы обнаружите еще какие-либо недочеты или можете предложить свое лучшее решение, предлагаю обсудить это в комментариях.
Полный набор исходников идеальной стрелочки можно скачать по ссылке:
scroll-top-test2.2.zip
One thought on “ Делаем идеальную стрелку вверх для сайта (код ScrollUp) ”
Супер, конечно. Только кнопка не исчезает до конца.
Оформление тултипов со стрелками на CSS с помощью символов
Тема уже достаточно избитая, но хочу поделится своим методом. Технологию придумал сам, на оригинальность не претендую, хотя пока что не встречал описание подобной техники.
Итак, стоит задача — сделать красивый тултип со стрелками на CSS.
Вариант с картинками рассматривать не будем, воспользуемся псевдоэлементами :before и :after.
Недавно здесь уже рассматривали такую технологию и использованием CSS-трансформаций:
http://habrahabr.ru/blogs/css/136061/
Я предлагаю другой способ — использование символов.
Первоначальный вариант статьи рассматривал использование символов ►, ◄, ▲, ▼, но, как верно заметил FTDeBUGgeR, на Андроиде все рассыпалось. Проблема оказалось банальной: в шрифтах под Андроид просто нет стрелок влево (►) и вправо (◄).
Отступать было некуда, и я решил использовать стрелки ↑, ↓, → и ←, который были и на Андроиде. Но тут внезапно под руку подвернулась бубновая масть — ведь этого символа достаточно для стрелок всех направлений! Кроме того, стрелки ↑, ↓, → и ← большого размера на самом деле не острые, а на Андроиде вообще имеют закругленные концы.
Поэтому будем рисовать «бубновые» тултипы.
Для начала оформим сам блок тултипа с красивым градиентным фоном, бордером и тенью:
В нашем примере мы будем использовать 2 CSS класса — ‘tooltip’ для общих свойств, а также для наглядности отдельные классы стрелок различного направления, например, ‘leftArrow’.
Далее добавим наши стрелки. Псевдоэлементы будут иметь свойство content с 16-ным кодом символа для его отображения.
Если необходим блок без бордеров, то задача упрощается и достаточно использовать один псевдоэлемент, например, :before.
Также запретим выделение нашей текстовой стрелки через user-select:
Сам символ располагается по центру блока 50х50 пикселей, а, используя свойство clip, мы будем отсекать часть символа, тем самым образуя именно треугольный блок стрелки нужного направления.
Главная трудность состоит в определении абсолютных координат наших псевдоэлементов, хотя с помощью FireBug’а можно быстро подобрать необходимый размер стрелки через font-size и спозиционировать элемент. Важно сместить «фоновую» стрелку так, чтобы она прикрыла бордер блока.
Также условимся, что нам необходимо иметь стрелку по центру края. Для этого используем 50% позиционирования по top или left, а также отрицательный margin в половину высоты или ширины блока соответственно.
Кстати первоначальный вариант использовал em, а не px в качество единиц размеров, но всеми любимая Opera катастрофически отказывалась понимать clip в em’ах, поэтому пришлось использовать px.
Здесь мы рассмотрим создание стрелки влево, в конце статьи есть ссылка на примеры для всех 4х вариантов стрелок (влево, вправо, вниз и вверх).
Собственно говоря, вот и все, встречаем «козырный бубновый тултип»: 
Для IE просто добавляем PIE, чтобы увидеть красоту (закругленные углы, тени и градиентный фон).
Остался минус — на левой и правой стрелках нельзя показать вертикальный градиент фона тултипа, но это не всегда заметно, а на тултипах с монотонным цветом фона и вообще не минус.
Как сделать кнопку или стрелку вверх для блога?
Всем привет! Давно собираюсь сделать кнопку или стрелку вверх для блога, но все откладывал. Сегодня наконец-то ее сделал, и решил написать небольшой пост на эту тему.
Зачем вообще нужна кнопка или стрелка вверх для сайта? Все просто, это делается для удобства пользователей. Почти все блогеры пишут огромные статьи по 3-10К символов, а кроме обычного текста, обязательно присутствует 2-3 изображения. В результате получается объемная страница, которую не очень удобно скроллить, чтобы вернуться в верхнюю часть страницы.
Кнопки или стрелки вверх используют не только блоги, их можно увидеть и в соц. сетях, таких как Одноклассники и ВКонтакте. Думаю очевидную пользу от этого мелкого дополнения вы поняли, теперь на примере покажу как сделать это удобство для своего блога или сайта. В качестве подопытного будет мой блог 🙂
Стрелка вверх для сайта
Способов сделать стрелку вверх для сайта немало. Одни используют дополнения в виде плагинов, другие используют JQuery и JavaScript. Что выбрать решать только вам.
Стрелка вверх на блог при помощи HTML и CSS
Самый простой способ сделать стрелку вверх для сайта, использовать обычную ссылку в виде картинки, оформленную CSS стилями. Делается это просто.
1. Подберите подходящую картинку в виде стрелки и загрузите в библиотеку изображений или в корневую директорию сайта.
2. Вставьте html код в подвал сайта (footer.php) перед закрывающимся тегом :
3. Вставьте код стилей в файл style.css:
4. Любуйтесь только что созданной стрелкой вверх 🙂
Единственный минус этого метода – статичность стрелки. То есть стрелка будет видна всегда, даже если вы находитесь в верхней части сайта, в то время как стрелка, созданная при помощи JQuery и JavaScript будет появляться плавно при прокрутке страницы вниз, а так же плавно прокручивать саму страницу при нажатии на стрелку.
Среди плюсов, минимальная нагрузка на сам ресурс, так как отсутствуют скрипты.
Стрелка вверх для сайта при помощи JQuery и JavaScript
При помощи JavaScript и подключенной библиотеки JQuery можно творить чудеса на блоге 🙂 но мы ничем таким заниматься не будем, а просто сделаем стрелку вверх.
1. Копируем скрипт и вставляем в файл header.php перед закрывающимся тегом
2. Закачиваем изображение подходящей стрелки в корневую директорию сайта.
3. Вставляем код стилей для стрелки вверх в файл style.css
4. В файл footer.php или в любое место, где хотите вывести стрелку, вставляем вот такой код:
5. Обновляем страницу и смотрим на результат.
Если вас не устраивает стрелка, аналогичным способом можно вывести кнопку, закачав ее изображение. А еще лучше, если для кнопки использовать стили CSS вместо изображения – фон, шрифт и т. д.
Стрелка вниз вверх для сайта
Стрелка вверх/вниз для сайта на WordPress легко реализуется простеньким плагином. Называется он Scroll Top and Bottom. Скачать плагин можно на официальном сайте вордпресс.
Настроек у плагина почти нет, просто скачиваем, активируем и выбираем дизайн стрелок. Вот как это примерно будет выглядеть:
Кнопка вверх для сайта ucoz
Вообще для uCoz написано столько скриптов, что не вижу смысла повторять за кем-то. Лишь дам небольшой совет новичкам, на uCoz не будут работать PHP скрипты, так как юкоз сайты постороены на HTML и CSS. Точнее PHP тоже можно подключить, но только если у вас премиум аккаунт.
Кнопка «Наверх»: как создать с CSS и jQuery
Кнопка «Вверх к началу» — это то, что многие из вас, вероятно, видели на многих веб-сайтах. Это стрелка, которая появляется в правом нижнем углу веб-страницы при ее прокрутке. Когда вы нажимаете, она возвращает вас к началу страницы. Если вы хотите добавить кнопку «Наверх» в процессе разработки сайта, или просто интересуетесь, как вы можете создать её самостоятельно, добро пожаловать на борт!
Вернуться наверх
Наш код будет состоять из двух частей, стилей CSS и маленького скрипта jQuery. Давайте начнем с CSS.
CSS стили для кнопки
Мы начнем с создания стилей и разметки для нашей кнопки. Вот часть HTML:
Кнопка будет состоять только из одного якорного тега с id кнопка. Мы также включаем ссылку на библиотеку FontAwesome, чтобы можно было использовать значок для нашей кнопки.
Начальные стили для кнопки будут выглядеть так:
Поскольку кнопка является элементом связки, а связки по умолчанию являются встроенными элементами, нам нужно изменить свойство display на встроенный блок, чтобы мы могли назначать ему размер.
Давайте сделаем квадратную кнопку 50х50 px с закругленными углами в 4px. Мы придадим ей ярко-оранжевый цвет и по 30px с каждой стороны. Фиксированная позиция всегда позволяет нашей кнопке оставаться в том же месте, когда мы прокручиваем страницу, а z-index очень большого значения, что кнопка всегда перекрывает другие элементы веб-сайта. Когда мы наводим курсор на кнопку, курсор меняется на указатель, а фон становится темно-серым. Чтобы сделать переход плавным, мы назначим переход на 0,3 секунды для свойства background-color. Также, когда мы нажимаем кнопку, цвет фона также изменяется и становится немного светлее.
Добавляем иконку
Сейчас наша кнопка пустая, давайте добавим на неё иконку. Мы делаем это, добавляя : :after псевдо=элемент типа этого:
Мы собираемся выбрать значок из самой популярной библиотеки шрифтов FontAwesome. Начнем с иконкой Chevron Up.
Чтобы отобразить её в псевдоэлементе, установите значение FontAwesome для тега font-family и назначьте значение Unicode для вашего значка в content.
Также убедитесь, что высота вашей линии равна высоте вашего значка, если вы хотите, чтобы он был центрирован по горизонтали.
Добавляем функциональность с jQuery
В этом подразделе мы поговорим о том, как собственно сделать кнопку рабочей. Самый простой способ это сделать — использовать JavaScript библиотеку jQuery. Для начала нам нужно добавить jQuery в HTML разметку. Добавьте эту строку прямо перед тем как закрыть тег body.
Сейчас мы можем написать наш скрипт используя синтаксис jQuery. Добавьте этот скрипт после строки jQuery:
Давайте поближе посмотрим на этот скрипт. Вы, наверно, заметили первую строку кода:
Запускать код внутри этой функции стоит только в том случае, если документ полностью загружен. Это отличный способ предотвратить ошибки, если ваш код JavaScript хочет внести изменения в части веб-страницы, которые не полностью загружены в браузере. Код, который мы запускаем после документа, полностью загружен и состоит из двух основных блоков кода, каждый из которых выполняет свою собственную работу. Первая часть скрипта заставляет нашу кнопку появляться и исчезать после того, как прокрутка страницы достигает определенной точки. Вторая часть делает прокрутку страницы вверх после нажатия на кнопку. Давайте рассмотрим каждый из них подробно.
Появление и исчезновение кнопки
Вот код, который отвечает за эту функцию:
Сначала мы объявляем переменную btn и назначаем ей ID button, так что нам будет легче обратиться к нему позже в коде. Также это помогает JavaScript быстрее выполнять вычисления. Как только мы сохраним элемент в переменной, JavaScript не будет нуждаться в поиске по всей странице много раз, когда нам нужно будет использовать ее снова в нашем коде.
В jQuery есть удобная функция .scroll().
Она связывает кусок кода, который будет выполняться каждый раз, когда происходит прокрутка на вашей веб-странице. Она принимает один параметр функции, которая выполняется каждый раз при прокрутке страницы. Вы можете применить его к любому прокручиваемому элементу, например фреймам и элементам с дополнительными свойствами, установленным для прокрутки. Обычно мы применяем его к элементу окна, так как в большинстве случаев там происходит прокрутка, включая наш пример.
Внутри функции мы постелили утверждение if/else:
То, что мы пытаемся сделать здесь, это проверить вертикальное положение полосы прокрутки и сделать, чтобы наша кнопка появлялась, когда прокрутка ниже определенной точки, и исчезала, когда она находится выше этой точки.
Таким образом, каждый раз, когда мы прокручиваем страницу, JavaScript проверяет, сколько пикселей скрыто, и сравнивает их с числом. В нашем случае это количество до 300, но вы можете изменить его, если хотите.
Если мы пройдем 300px, то мы добавим класс show к нашей кнопке, который заставит её появиться. Если число меньше 300, мы удаляем этот класс. Добавление и удаление классов является еще одной причиной популярности jQuery. Мы можем сделать это с помощью двух простых методов addClass() и removeClass(). Однако у нас пока нет класса show в нашем CSS, поэтому добавим его:
По умолчанию ваша кнопка будет скрыта, поэтому нам нужно добавить еще несколько правил в элемент #button:
Чтобы сделать переход плавным, давайте добавим еще два значения в атрибут перехода, непрозрачность и видимость, установленные на 0,5 секунды.
Подъём наверх
Вторая часть скрипта позволяет вам подняться наверх, после нажатия на кнопку.
Функция обработки принимает параметр события. Мы можем назвать все, что захотим, но обычно предпочтительнее e или event. Нам нужен параметр события, чтобы передать его функции и использовать для метода preventDefault().
Метод e.preventDefault() предотвращает случайное действие события, например, ссылка не приводит нас к следующей странице. В нашем случае это не имеет решающего значения, поскольку наш якорный элемент не имеет атрибута href и в любом случае не приведет нас к новой странице, но всегда лучше дважды проверить.
Метод jQuery .animate() — это тот, который выполняет весь трюк.
Первый параметр метода .animate() — это список свойств, которые мы должны анимировать. Наше свойство называется scrollTop, и мы хотим, чтобы оно имело значение 0. Тип этого параметра является простым объектом, поэтому нам нужно использовать фигурные скобки и записывать наши значения, используя синтаксис парой ключ / значение.
Второй параметр — это скорость, с которой мы хотим, чтобы наша анимация запускалась. Он измеряется в миллисекундах, и чем выше число, тем медленнее анимация. Значение по умолчанию — 400, но изменим его на 300.
Наконец, мы применяем метод animate к HTML и элементам body на нашей странице.
Теперь каждый раз, когда мы нажимаем кнопку, это возвращает нас в начало страницы.
Финальную версию вы можете посмотреть в демо CodePen. Я также добавила примеры текста для демонстрации.
Завершение
Кнопка «Наверх» полезный инструмент в дизайне интерфейса страницы. И если на вашем сайте будет такая, она сделает взаимодействие посетителей с сайтом намного удобнее. Этот гайд поможет вам разобраться в CSS и JavaScript, даже если вы не веб-разработчик. Надеюсь, что пост был вам полезен и у вас непременно получится сделать такую кнопку!
Часто задаваемые вопросы
Это действительно удобно для пользователя, особенно если страница длинная и содержит много контента. Кнопка «Вернуться к началу» улучшает опыт взаимодействия и делает посещение вашего сайта более приятным для пользователя.
Она состоит из двух частей: дизайна CSS и небольшого скрипта jQuery, который заставляет его работать.
Читайте также:
Копирайтер и человек, который отвечает за локализацию сайта TemplateMonster на русский и украинский языки. Любит читать и созерцать. Обучалась Анна на филологическом факультете в Черноморском Национальном Университете им. Петра Могилы. Владеет несколькими иностранными языками, такими как английский и немецкий. Обожает путешествовать, в свободное время описывает лайфхаки и гиды для путешественников. Личность с активной жизненной позицией, позитивный и ответственный работник.