Как сделать кнопку вверх на сайте
Лучшие инструменты для создания кнопки вверх на сайте WordPress
Она улучшает и влияет на удобство пользования, особенно для компьютерных версий, когда статьи длинные и нужно быстро подняться в начало.
Кнопка вверх для сайта с плагином jQuery Smooth Scroll
Поклонникам простоты и скорости подойдет плагин кнопки jQuery Smooth Scroll ссылка на WordPress.org. Установить можно из админки, изображение модуля выглядит так.
Дальнейших настроек не требуется, поставил и кнопка вверх для сайта появится автоматически. Отсутствие настроек считаю плюсом, внешний вид могу настроить сам. Так прокрутка выглядит на блоге, маленькая размер – для слабовидящих будет проблемой.
Что делать если CSS и JS не знакомы администратору сайта. Тогда разберем другой инструменты.
Simple Back To Top
Пойдем от простого к сложному, Simple Back To Top имеет одну функцию – изменять значок кнопки вверх. Ставится так же из панели WordPress стандартным поиском.
Если картинка будет круглая, то обязательно делайте с прозрачным фоном в формате PNG.
WPFront Scroll Top
Решение типа все включено, плагин WPFront Scroll Top имеет множество настроек и гибкость в выводе кнопки наверх. На скриншоте только часть панели WPFront.
Отличный инструмент, помогающий сделать на WordPress еще одну интересную функцию.
Создаем back to top без плагина
Без плагина кнопку на верх сделать не сложно, стоит придерживаться инструкции. Мы написали код, сейчас разберем его составляющие. Разделим конфигурацию на три кода, первый – тег button. Внутри тега атрибут class и текст, выводимый на блоге. Вставляем в файл темы WordPress на то место, где хотим его видеть, например, правый нижний угол, тогда записываем код в файл footer активной темы перед закрывающим тегом body.
Следующая запись это JS код, вставляем так же перед закрывающим тегом body, все скрипты должны располагаться в подвале сайта. Не забываем нажать Обновить.
Третий код это CSS стили, подобрали нейтральный синий цвет. Вставляем в файл style.css активной темы WordPress.
Если сделали по инструкции, то на сайте появится кнопка с надписью наверх.
Надпись “наверх” меняется в первом разделе в теге button, а оформление в стилях. Если в текстом не понятно, то предлагаю к просмотру видео.
Заканчиваю статью, разобрались как сделать кнопку, ведущую вверх страницы в CMS WordPress с помощью двух способов: без плагина и с ним, успехов!
Как сделать кнопку «Наверх»
Наверняка, Вы часто встречали кнопку «Наверх«. Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку «наверх».
Давайте сразу приведу код, и Вы всё поймёте:
Соответственно, при клике по ссылке «Наверх» мы попадём на элемент с id=»top», то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.
Есть ещё один способ, он ещё проще этого, однако, здесь требуется использование JavaScript. Вот код:
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 13 ):
Зачем создавать ещё один блок чтобы перейти наверх. Не проще ли сделать так Наверх и всё.
Действительно, можно и так. Не использовал такой способ, но теперь буду знать. Спасибо!
А как на javascript сделать плавный переход наверх и чтобы при нахождении вверху странички кнопка исчезала?
Для этого лучше использовать JQuery. Есть специальные плагины для этого.
Кстати, кнопка «наверх» как правило появляется только если прокрутить окно вниз. А на самом «верху» ее не должно быть видно, логично? Интересно, какое событие отвечает за ее появление?
Это событие называется scroll, обработчик onscroll, применяется к body.
А если чуть сложнее: если пользователь прокрутит страничку вниз на заданное число пикселей?
Так для этого и используется onscroll. Ставьте функцию в обработчике и проверяйте каждый раз значение такого выражения: self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
Супер! То, что надо, спасибо.
Кстати, на тему скроллинга. Всегда интересно было, как реализовать подгрузку изображений аяксом в момент, когда они попадают во «viewport». Т.е. как заставить картинки грузится лишь тогда, когда юзер прокручивает экран вниз, и они попадают в его поле зрения.
Примерно так. Вместо изображений создаются пустые блоки. Затем проверяется, находится ли данный блок в поле видимости окна. Если да, то этот блок заменяется (либо вставляется внутрь) на изображение, опять же через JavaScript (объект Image). При замене на изображение и начнётся его загрузка.
алгоритм ясен. поймать же момент, когда изображение попадает в поле зрения я попытался, проверяя по событию scroll это условие: (document.body.scrollTop + screen.availHeight) > myImage.offsetTop)
Михаил и Никита, спасибо Вам обоим. Получилось двумя способами с первого раза, а мучилась уже целый год, не знала, как это сделать.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Кнопка «Вверх» для сайта 24
Здравствуйте, уважаемые читатели. Сегодня я расскажу Вам о том, как я реализовал кнопку «Вверх» на своём блоге. Прежде всего, я решил сделать кнопку «Вверх», по тому, что эта кнопка в один клик позволяет подняться в начало статьи. Да и честно говоря, параметры юзабилити (удобство пользования) учитываются поисковыми системами. То есть при наличии кнопку «Вверх» отпадает необходимость мучать колесо прокрутки на мышке. И вот это удобство для пользователя положительно учитывается поисковыми системами.
Прежде чем установить кнопку на своём блоге, я занялся поиском оптимального решения. Самым простым способом оказалось, как вы наверное догадались, установка плагинов.
Установки кнопки «Вверх» с помощью плагина для WordPress
Я попробовал два: Scroll to Top и Dynamic To Top. Оба достойные плагины, легко устанавливаются и настраиваются. Есть возможность указать путь к своей картинке. В Dynamic To Top есть ещё возможность настроить, будет ли кнопка «Вверх» отображаться на мобильных устройствах.
Но, как и любой другой плагин эти так же создают дополнительную нагрузку на сервер. Я считаю, что ради одной кнопки дополнительная нагрузка на сервер, — не оправдана.
Такой способ реализации кнопки «Вверх» подойдёт лишь тем, кто абсолютно не желает хоть на сколько то ускорить работу своего сайта. И не желает разбираться в тонкостях его работы.
И я решил не использовать плагин и продолжить поиск идеального решения.
Установки кнопки «Вверх» на основе jQuery
jQuery — библиотека JavaScript, обеспечивающая взаимодействие JavaScript и HTML.
Данный способ подойдёт для реализации кнопки «Вверх» с плавной прокруткой на многих сайтах, в том числе и сделанных на WordPress.
Этот способ хорош, но он на один шаг длиннее следующего способа. О котором мы как раз и поговорим подробно.
Установки кнопки «Вверх» на чистом JavaScript
Итак, именно этот способ я выбрал для своего блога созданного на WordPress. Для этого способа вам потребуется всего лишь два файла (картинка и скрипт). И сделать вставку кода в файл footer.php и добавить несколько стилей в style.css.
Этот способ хорош тем, что не надо подключать ни каких дополнительных библиотек или устанавливать плагины. А результат получается отличный, без лишней нагрузки на ваш сайт.
Шаг 1. Создание изображения кнопки «Вверх»
Итак, для начала вам потребуется изображение для кнопки «Вверх». Таких изображений в Интернете огромное множество. Скачав такое изображение, его нужно будет ещё доработать. А точнее сделать спрайт. Спрайты позволяю на основе CSS сделать объединение фоновых картинок, которое выглядит как эффект анимации.
Для работы с графикой, я использую Photoshop. Но так как не у всех есть фотошоп, мы воспользуемся онлайн сервисом PIXLR EDITION, который идеально подходит для выполнения подобного рода задач.
После того, как вы скачали нужное изображение, переходим в онлайн редактор Pixlr Edition и выбираем «Загрузить изображение с компьютера».
И открываем ваше изображение кнопки «Вверх». В моём случае, — это ракета.
Если ваше изображение большего размера, чем вам нужно, как у меня. Такое изображение нужно уменьшить до нужных размеров. Воспользуемся способом трансформации, так как нужно изображение повернуть. Выбираем пункт меню «Редактирование» — «Free transform».
Вокруг изображения появляются маркеры, за которые Вы можете изменить размер изображения или повернуть вокруг своей оси.
Для пропорционального изменения ширины и высоты изображения предлагаю использовать диагональные маркеры с удержанием клавиши Shift для исключения искажения.
Должно получится вот так.
Теперь нужно сделать копию полученного изображения, точнее копию этого слоя. Для этого в окне «Слои» нужно навести курсор мышки на слой, нажать левую кнопу и удерживая её перетащить слой на иконку «Новый слой».
Следующим действием нужно выстроить изображения строго вертикально друг над другом. Для этого выбираем инструмент «Перемещение» и клавишами управления курсором поднимаем одно изображение над другим.
Теперь нужно верхнее изображение обесцветить, для получения эффекта, когда цвет проявляется после наведения на объект указателя мышки. Выбираем пункт меню «Коррекция» — «Цветовой тон/Насыщенность». Ползунок «Насыщенность» сдвигаем в крайнее левое положение (-100).
Теперь нужно отсечь всё лишнее. Для этого выбираем инструмент «Обрезка» и выделяем область вокруг нашего изображения. Ничего лишнего, только два изображения. После выделения области, нажимаем клавишу «Enter».
Всё готово для сохранения изображения, но для начала запомните размер изображения. Он пригодятся в дальнейшем.
Вот теперь всё готово и нужно сохранить изображение. Для этого переходим в пункт меню «Файл» — «Сохранить». Выбираем сохранить на «Мой компьютер», вводим имя (только латинские буквы) и выбираем тип файла PNG (этот формат поддерживает прозрачность). Жмём кнопку «ДА».
Шаг 2. Создание файла скрипта кнопки «Вверх»
Разумеется, мы не будем изобретать колесо. А воспользуемся готовым решением, которое я нашёл вот здесь. Из всего что я пересмотрел, этот вариант понравился больше всего. Хотя, конечно для новичков, написано сложновато для понимания. На самом деле всё просто. Нужно создать новый файл и вставить в него специальный код. А это файл далее использовать в работе.
Для создания файла, да и вообще работы с кодом, рекомендую использовать бесплатный редактор кода NotePad++.
Открываем редактор, создаём новый файл и вставляем предложенный код. Скачать весь код можно здесь.
Теперь сохраняем файл в формате js.
Готово, изображение и файл со скриптом для кнопки «Вверх» с плавной прокруткой у нас есть. Остаётся внести небольшой фрагмент кода в файл подвала (footer.php) вашей темы WordPress. И в таблицу стилей (style.css) добавить необходимые стили для кнопки «Вверх». А также скопировать наши файлы на сайт.
Шаг 3. Копирование файлов на сайт WordPress
Лучше всего для выполнения таких задач подойдёт FTP-соединение через TotalCommander или FileZilla. О том, как настроить такое соединение читайте здесь.
Файл с изображением кнопки «Вверх» нужно скопировать в папку images Вашей темы.
Пример: http://Ваш сайт/wp-content/themes/Ваша тема/images/up.png
Файл скрипта нужно скопировать в папку js Вашей темы.
Пример: http:// Ваш сайт /wp-content/themes/ Ваша тема /js/totop.js
Если таких папок у вас нет, вы можете их создать или скопировать файлы в другие папки. Только непременно запомните к ним путь. Это важно.
Шаг 4. Доработка файла footer.php
Совет: перед любыми экспериментами с кодом, делайте резервные копии. Если не всего сайта, то хотя бы файлов с которыми собираетесь работать.
Итак, в административной панели WordPress выбираем раздел «Внешний вид» — «Редактор» — открываем файл «Подвал (footer.php)».
Как добавить кнопку «наверх» на сайте
Кнопка вверх для сайта — более 7 проверенных решений
на всех страницах вашего сайта. Если библиотека jQuery уже подключена к вашему сайту, то первую строчку добавлять не нужно.
Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.
3. UItoTop JQuery плагин
Простой плагин делающий плавное появление кнопки и плавный скроллинг вверх при нажатии на ее. Чтобы задействовать плагин на своем сайте нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить все необходимые файлы плагина и он будет работать.
В представленном архиве находится 3 папки: css — файл стилей кнопки, img — изображение и папка js в которой находятся 4 JavaScript файла.
Подключение JavaScript файлов:
Распакуйте скачанный архив с исходниками в какую либо папку вашего сайта. Для задействования плагина нам достаточно подключить три из имеющихся js файлов. Для их подключения перед закрывающим тегом добавьте следующие пути к файлам:
Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.
Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:
Следующий шаг это добавление CSS стилей, без них кнопка не заработает. Подключить их можно двумя способами.
Первый способ это добавить на все страницы вашего сайта между тегами ссылку на CSS файл стилей:
Не забудьте только изменить путь к файлу.
Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.
4. Кнопки прокрутки вверх и вниз на JQUERY
Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают. Этот эффект вы можете увидеть просмотрев демо.
В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.
Сразу после HTML кода, перед тегом разместите код вызова необходимых JavaScript файлов и JQuery код.
Пути ведущие к JS файлам необходимо заменить на свои.
В первой строчке кода подключается библиотека JQuery, поэтому если ранее вы уже ее подключали к своему сайту, то ее необходимо убрать.
Далее следует подключение еще одного JS файла и код содержащий определенные функции, которые необходимо рассмотреть подробнее. Потому как про помощи их можно изменять некоторые параметры работы кнопок. Ниже приведен код с разъяснениями:
Для того, чтобы добавить CSS просто подключите к страницам сайта файл style.css, находящийся в архиве с исходниками:
А самым лучшим вариантом будет скопировать стили этого файла и вставить их в файл стилей своего сайта.
5. Кнопка плавной прокрутки вверх при помощи JQuery
Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.
Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.
Теперь разберемся, что нужно сделать для подключения кнопки к сайту
Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это: icon_top.png
Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:
При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.
Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:
Первый ScrollTop — определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.
Как вы видите есть еще два параметра — 0 — значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 — это скорость анимации в миллисекундах.
6. Анимированная кнопка перехода вверх
При прокрутке страницы на определенное количество символов вниз, слева в нижней части появляется большая кнопка со стрелочкой. При наведении курсора кнопка плавно загорается, а при клике происходит плавная прокрутка вверх.
Для создания кнопки используется изображение стрелки, CSS стили и JQuery.
Изображение стрелки использующееся для кнопки можете взять здесь: up-arrow.png
Для вызова кнопки используется следующий HTML код:
И еще один важный момент, касающийся HTML кода. Тегу вы должны присвоить идентификатор top.
В случае если тегу уже присвоен определенный id, тогда в коде вызова кнопки, размещенном чуть выше, #top нужно заменить на #ваш-id
При помощи CSS заданы отступы и внешний вид кнопки, добавлено свойство transition: для создания эффекта задержки при наведении курсора. Вставлять его лучше в CSS файл вашего сайта.
Расширения для Joomla и плагины для WordPress позволяющие создавать кнопку «Наверх».
На мой взгляд на любой CMS лучше всего использовать одно из представленных выше решений, но если вы не знаете как подключить приведенные скрипты к своему сайту на Joomla или WordPress, то можете воспользоваться следующими готовыми, бесплатными расширениями и плагинами.
Расширения для Joomla:
Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/24769
Skyline Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/19772
Top of the Page: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/16807
Плагины для WordPress:
Найти самые популярные плагины для создания такого функционала вы сможете по ссылке: http://wordpress.org/plugins/tags/scroll-to-top
Материал подготовлен проектом: WebMasterMix.ru
Делаем кнопку “Наверх” для сайта без плагинов
вашего сайта следующую строку:
2. Подключение скрипта, выводящего кнопку
Код скрипта можно вставить двумя способами:
Первый вариант проще, второй, на мой взгляд, удобнее.
Вот сам скрипт (автор Тимур Камаев wp-kama.ru):
| 123456789101112131415161718192021222324 |
Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.
Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:
Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.
Картинка для кнопки
Для того, чтобы изображение кнопки менялось, файл картинки должен состоять из двух половинок, на одной изображается обычная стрелка, на другой активная стрелка (под наведенным курсором). Посетителю одновременно показывается только одна половина. У меня верхняя стрелка сделана полупрозрачной, вторая непрозрачная (яркая).
Заданные цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.
Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.
Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.
Код можно упростить, если удалить из него вот эту строку:
Она отвечает за изменение отображаемой части картинки при наведении курсора и если ее убрать, то кнопка всегда будет выглядеть одинаково. В этом случае вам не нужна будет картинка с двойным изображением, поставьте любую стрелку.
Несколько вариантов стрелок я сделал, а в интернете вы можете отыскать много готовых.
Как видите, создать красивый сайт самому несложно. На этом на сегодня все.
Кнопка вверх для сайта
Доброго времени суток! Сейчас рассмотрим такую вещь, которая касается юзабилити вашего сайта – кнопка вверх для сайта. Для тех, кто не знает, что такое юзабилити сайта вкратце поясню — юзабилити сайта обозначает на сколько удобен, логичен и прост интерфейс сайта для пользователя.
Для чего нужна кнопка наверх
Кнопка вверх в полной мере относится к удобству пользования сайтом, т.к. при ее наличии посетителю сайта не придется крутить долго колесико мышки или тянуть ползунок полосы прокрутки, чтобы вернуться вверх страницы — достаточно просто нажать на кнопочку.
А если в статье находится много текста и куча комментариев, то эта процедура может занять много времени и возможно вызовет гневные эмоции у пользователя. Такая ситуация может повлиять на то, что пользователь больше не вернется на ваш сайт. Так что непременно ставьте кнопку вверх на свой сайт.
Ну это были лирические отступления, теперь приступим к делу.
Кнопка наверх для сайта может ставиться на сайт разными способами. Мы рассмотрим только некоторые из них.
Кнопка вверх для сайта WordPress, с помощью плагина WPFront Scroll Top
Расскажу немного о плагине WPFront Scroll Top и что он из себя представляет. Плагин WPFront Scroll Top довольно удобен в использовании, в нем минимум необходимых настроек. Также есть возможность выбрать – кнопка должна быть с картинкой или просто в виде текста. И такая немаловажная вещь, как использование собственной картинки, что не может не радовать.
Для начала устанавливаем плагин WPFront Scroll Top. Для этого заходим в админку сайта, в меню выбираем Плагины, в нем выбираем Добавить новый. На открывшейся странице в строку для поиска плагинов вводим название плагина WPFront Scroll Top и устанавливаем его. После установки не забываем его активировать.
После установки и активации в главном меню админки появится пункт WPfront. Наводим на него мышь и в появившемся подменю выбираем пункт Scroll Top.
Перед нами открылась страница с настройками данного плагина. В принципе, чтобы кнопка вверх для сайта WordPress уже появилась на сайте достаточно поставить галочку напротив Включить.
Остальные настройки можно оставить по-умолчанию.
В настройках вы можете выбрать картинку для кнопки, как из представленных в плагине, так и свою собственную, указав URL вашей картинки. В предоставленных плагином параметрах, кнопка наверх для сайта WordPress довольно гибко настраивается. Мы не будем подробно рассматривать настройки, т.к. это плагин переведен на русский язык и в нем все интуитивно понятно.
Кнопка вверх на сайт, с использованием скрипта на JQuery
Для тех, кому важна каждая миллисекунда при загрузке сайта или просто вы уже запутались в куче установленных плагинов и не хотите ставить еще больше, то вам подойдет этот способ, но он более трудоемкий и менее гибок в настройке. Этот способ будет состоять из трех шагов.
На первом шаге мы сформируем HTML кнопки наверх, далее оформим его внешний вид, с помощью таблицы стилей CSS и за само действие, которое будет совершать кнопка, у нас будет отвечать javascript. Итак, давайте приступим.
Кнопка наверх для сайта HTML код
Сама кнопка будет представлять из себя обычную ссылку. Она у нас будет пустая. Вот собственно и весь HTML-код:
Для тех, у кого сайт на WordPress заходим в административную часть сайта, в главном меню наводим мышкой на пункт Внешний вид, в появившимся подменю выбираем Редактор.
Выбираем шаблон с именем Подвал (footer.php), проматываем весь код, находим закрывающийся тег и перед ним вставляем сей код. После всех внесенных правок не забываем нажимать кнопку Обновить файл.
Также можно добавить эту ссылку, с помощью сценария Javascript:
Можно его подключить в отдельном файле javascript или добавить в конец существующего и тогда вообще не придется лезть в HTML-код.
Кнопка вверх для сайта CSS код
На этом шаге нужно сформировать CSS-код. Необходимо в нем указать, что кнопка будет занимать фиксированную позицию, задать ей ширину и высоту, а также цвет фона и картинку.
Вот как выглядит, собственно, CSS-код:
| background: #27AE61 url(«images/up-arrow.png») no-repeat center 43%;-webkit-border-radius: 30px;-moz-border-radius: 30px; |
Берем код и копируем в ваш основной файл с таблицами стилей, желательно в конец.
В WordPress правка файла с таблицами стилей делается в редакторе Внешнего вида. Этот процесс алогичен тому, как мы добавляли код html кнопки вверх для сайта. После всех правок не забываем нажимать обновить файл. Рисунок прилагается.
Давайте теперь пройдемся по настройкам:
Width и height – это ширина и высота кнопки. Тут все понятно, дополнительных пояснений, думаю, не требуется.
Right и bottom – это параметры для того, чтобы указать насколько пикселей кнопка будет отодвинута от правого нижнего края сайта справа и снизу соответственно. С помощью этих параметров также можно переместить кнопку в левую сторону. На некоторых сайтах кнопку делают и с левой стороны, но мне больше нравиться традиционный вариант справа.
Для того чтобы переместить кнопку вверх на левую сторону сайта требуется просто поменять параметр right на left. И тогда пиксели будут отсчитываться от левой стороны. Ничего сложного – все очень просто!
Background. Первый параметр определяет цвет фона кнопки, второй картинку. Обратите внимание что путь до картинки относительный.
Это значит, что он будет отчитываться относительно файла css, в котором указан параметр background.
Проверьте, где находится картинка и укажите путь до нее верно, иначе картинка показываться не будет.
Если вы хотите, чтобы у кнопки не было фоновой заливки, достаточно просто убрать первый параметр.
Border-radius округляет углы квадратного элемента. В данном примере с указанными параметрами у нас получится круглая кнопка. Если поставить border-radius в 0, то кнопка получится квадратной. Это понадобится сделать, если вы захотите поставить квадратную картинку.
Кнопка «Наверх» на чистом JavaScript | Александр Казаков
Создаем кнопку на нативном JavaScript, без jQuery. Создаем улучшенную кнопку, действующую как вверх, так и вниз.
Вначале разметка.
Добавляем в HTML тег a, задаем ему класс и заглавие(title). Содержимое тега будет спецсимвол ↑ он как раз и будет отображаться в виде стрелки. Важно заметить, что здесь у тега a нет атрибута href, т.к. он нам здесь не нужен.
Пишем стили.
В будущем вы сможете изменить внешний вид кнопки, сейчас сделаем «базовую» модель. Записываем в CSS представленный код, он стандартный, отмечу только класс back_to_top-show, мы будем его добавлять/убирать у нашей кнопке средствами javascript.
В начале(после загрузки страницы) у кнопки стоит класс back_to_top и соответственно display:none; т.е.
кнопка не отображается, когда мы добавим кнопке класс back_to_top-show то display станет block и кнопка появится на экране.
Теперь JavaScript.
Мы создадим два обработчика:
var goTopBtn = document.querySelector(‘.back_to_top’); window.addEventListener(‘scroll’, trackScroll);
goTopBtn.addEventListener(‘click’, backToTop);
Вначале отслеживаем прокрутку документа.
Мы задаем два условия(if) и в зависимости от срабатывания одного из них, мы нашей кнопке добавляем/удаляем класс back_to_top-show, а следовательно делаем ее «видимой»/»невидимой». Когда мы прокручиваем документ на «один экран», кнопка появляется, и наоборот.
Готово!
Теперь соберем все воедино, переведем наш код в «строгий режим» путем добавления ‘use strict’; и обернем его в анонимную функцию, это нужно чтобы наши переменные не попали в глобальную область видимости( т.е. чтобы не было конфликта с другими нашими скриптами).
Кнопка «Наверх» на чистом JavaScript. Как оказалось, её несложно сделать и без jQuery. Я приведу воспроизводимый код на Codepen, вы сможете еще раз все проверить и посмотреть в действии(в codepen добавлен еще один скрипт генерирующий цифры, он нужен для более наглядной демонстрации скролла, вам нужен только код отмеченный комментариями, на другой не обращайте внимания).
Простая кнопка Наверх с функцией возврата – JavaScript
Кнопка «Наверх» очень часто используется на сайтах, где есть много длинных страниц. Когда пользователь, просматривая большую статью, галерею картинок, новости в социальных сетях и т. п.
, хочет вернуться к началу страницы, он либо долго скроллит (что не очень удобно), либо нажимает клавишу Home на клавиатуре, либо пользуется специальной кнопкой «Наверх».
Преимущество этой кнопки заключается в том, что она может работать на планшетах и смартфонах, и в любых других случаях, когда у вас нет под рукой клавиатуры. К тому же, не все пользователи могут знать о полезной функции клавиши Home, а кнопка на сайте всегда видна, по ней сразу видно, для чего она предназначена.
Второй плюс – эту кнопку можно усовершенствовать и сделать так, чтобы она возвращала пользователя к тому месту страницы, откуда он поднялся наверх. Именно этот вариант кнопки мы будем сегодня делать. Вы можете просмотреть демо, а также скачать файл с примером на свой компьютер.
Демо Загрузить архив RAR
Шаг 1. CSS
Та часть CSS, которая касается стиля кнопки, выглядит следующим образом:
Шаг 2. JavaScript
Следующий шаг – код JavaScript. Для удобства внутри добавлены комментарии с пояснениями:
Шаг 3. HTML
Осталось дело за малым – создать кнопку в HTML:
Вот и всё, простая, но очень удобная кнопка Наверх для сайта с функцией возврата готова. Вы можете настроить ее стиль самостоятельно, который будет подходить под ваш сайт.
Желаем вам творческих успехов и довольных пользователей!
Кнопка наверх для сайта
Наверняка на многих блогах вы замечали кнопку, которая появлялась после небольшой прокрутки статьи. Это кнопка наверх для сайта очень удобная для читателя вещь, добавляющая дополнительное удобство при прочтении статьи. Реализацией этой кнопки мы сейчас с вами и займемся.
Зачем нужна кнопка наверх для сайта
Кнопка наверх на сегодняшний день является одним из обязательных элементов для вашего сайта. Особенно если на своем блоге вы размешаете объемные статьи. Читателю может понадобиться вернуться к началу записи.
Прокручивать длинную запись колесом мышки занятие довольно нудное и не добавляющее положительных эмоций вашим посетителям. Кнопка наверх для сайта позволит читателю при необходимости быстро вернуться к началу статьи.
Кнопку можно установить на блог как плагином, так и отдельным кодом. На моем блоге ни один вариант кода не заработал. Никаких ошибок, но кнопка не показывается. Тот же косяк с некоторыми плагинами. Корректно у меня заработали только два плагина. О них и будет мое сегодняшнее повествование. Надеюсь, вы знаете, как установить плагин на wordpress?
Smooth Scroll Up
Плагин позволяет добавить кнопку в четырех вариантах
Доступен показ кнопки в трех местах: слева, в центре или справа. В режиме изображения для кнопки можете указать путь к своей картинке. Остальные параметры отображения кнопки настраиваются в файле стилей плагина.
Интересно: Удаление неиспользуемых изображений на блоге wordpress
Scroll To Top
Этот плагин имеет гораздо меньше возможностей, однако, на моем блоге так же как и предыдущий заработал без проблем. Выводит текстовую кнопку строго внизу по центру экрана.
Интересно: Лучшие плагины для wordpress блога
Настроек минимум. Поменять можно текст, ширину, цвет текста и цвет фона кнопки.
Пользуйтесь описанными плагинами и кнопка наверх для читателей вашего сайта станет очередной удобной фишкой. Они будут вам благодарны. Честное пионерское! Зуб даю!
С уважением Денис Иванов, автор блога dendrblog.ru
Кнопка «Вверх» для сайта — простой и легкий скрипт на jQuery от Яндекса
| $(document).ready(function() < $(window).scroll(function () $(‘#scroller’).click(function () <$('body,html').animate( >); |
Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.
Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом
Опять же, в WordPres надо редактировать файл footer.php, а для DLE снова main.tpl.
Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту).
| .b-top .b-top:hover .b-top-but |
png) no-repeat 50% 11px;border-radius:7px;>
Как видите, я даже url фоновой картинки со стрелкой не стал менять, оставил подгрузку с яндексовских серверов. На Яндексе пропала картинка, указал путь к картинке на своем сервере, а вам рекомендую ее сохранить к себе, будет надежнее.
Что тут можно настроить и изменить под себя:
Все готово, надеюсь, ничего не забыл. Безумно просто и настолько же полезно для сайтов с очень длинными страницами.
Спасибо за внимание, друзья. Пользуйтесь скриптом, задавайте вопросы в комментариях, и пишите свои предложения и пожелания.
С уважением, Александр Алаев
Кнопка — наверх для сайта без плагина!
’’. Находятся эти теги в файле ‘’header.php’’ или ‘’index.php’’. У меня добавлен этот код в файле ‘’header.php’’ и работает все отлично.
Этот код подключает библиотеку jQuery, про которую я говорил. Если у вас уже она подключена, то пропустите этот шаг, и приступайте к следующему. Вставить данный код, перед закрывающимся тегом ‘’’’, находится в файле ‘’header.php’’:
| $(document).ready(function() <$('body').append('^ Наверх');$(window).scroll(function() |
И необходимо добавить такой код в таблицу ‘’style.css’’, чтобы придать красивый внешний вид кнопке:
| border: 1px solid #b1b1b1; font: 11px Verdana, Arial, Helvetica, sans-serif; |
Теперь немного объясню, как менять настройки и стиль кнопки.
Теперь про сами стили, расскажу только то, что вам пригодится, возможно.
| width: 80px; — размер формы кнопки;top: 10px; — расстояние от верха;left: 10px; — расстояние от левого края;cursor: pointer; — указатель мыши при наведении;background: #f2f2f2; — цвет кнопки;border: 1px solid #b1b1b1; — толщина и цвет рамки вокруг кнопки;text-align: center; — текст по центру;color: #404040; — цвет текста;font: 11px Verdana, Arial, Helvetica, sans-serif; — шрифт текста;Я добавил еще стиль при наведении указателя:#toTop:hover < background: #B7D1EC; >– ставьте в самом конце, если нужно вам. |
Возможно, пригодится еще вот такой стиль, работают в паре для разных браузеров.
| -moz-border-radius: 80px; — закругление углов-webkit-border-radius: 80px; — закругление углов |
Ну, саму красоту вы уже будете настраивать на свой вкус и цвет, моя задача показать вам, как это сделать. После добавления всех кодов, обновите страницу и посмотрите что получилось.
Вот такая кнопка получилась у меня, а при наведении она становится светло синего цвета.
Это основные настройки и стили нашей кнопки.
На этом у меня все, надеюсь было полезно!
Удачи Вам и до новых встреч.
Как сделать кнопку «наверх» на WordPress блоге
Привет, Друзья! По просьбам читателей сегодня я расскажу как сделать кнопку “наверх” на WordPress блоге. Я думаю, нет необходимости объяснять для чего нужда такая кнопка? Все итак понимают, что при нажатии на кнопку “наверх”, функция, заложенная в данной кнопке, переносит читателя к началу страницы.
Это особенно полезно когда пост объемный и много комментариев к статье, и для того, чтобы вернуться к началу статьи, приходится довольно продолжительно скролить колесико мышки (а большинством из нас правит лень), поэтому кнопка “наверх” сохраняет наше “душевное равновесие”и моментально возвращает к началу статьи.
Сделать кнопку “наверх” можно как при помощи плагина, так и по средствам небольшого скрипта. В этом уроке я расскажу про оба способа.
Т.к. новички не очень любят лезть в файлы сайта и что-то в них менять/добавлять, то тогда подойдет небольшой и легкий плагин Scroll to Top.
Для более опытных пользователей WordPress, функцию возвращения “наверх” осуществим с помощью скрипта. Хотя скрипт и для новичка поставить не составит труда.
Лично я очень далек от различных jquery и других библиотек, но это не мешает мне просто взять готовый код и вставить в нужный файл блога.
(Просто нужно знать в какой файл вставить, поэтому прочтите статью о структуре шаблона WordPress).
Почему многие предпочитают скриптами пользоваться? Да все просто — чем больше плагинов активировано на блоге, тем дольше блог загружается, нагрузка на хостинг больше ну и все вытекающие из этого…
Как сделать кнопку “наверх” с помощью плагина Scroll to Top
Итак, скачиваем плагин Scroll to Top – скачать
Дальше устанавливаем и активируем плагин на своем WP блоге. (Как установить плагины на WordPress)
После того, как активировали плагин Scroll to Top, при обновлении страницы на блоге, начните спускаться по странице вниз), и чуть ниже от верха, слева внизу появится кнопка “наверх”
В принципе можно ничего не менять, все работает и так нормально, но для тех, кто хочет изменить скорость пролистывания страницы наверх (при нажатии на кнопку), или хочет, чтобы кнопка появлялась ниже или выше (кнопка по умолчанию появляется после 350 строки(строки, наверное, считаются по исходному коду)), то зайдите в настройки плагина: “Админка — Параметры — Scroll to Top”
В настройках плагина Scroll to Top все на русском языке и все понятно: о ссылках на изображение поговорим ниже, со скоростью и после какой строки будет появляться кнопка “наверх” можете поэкспериментировать сами и настроить как вашей душе угодно!
Если Вам не нравится стандартная кнопка “наверх” (стрелочка в синем кругляшке), то можете скачать архив с кнопками и заменить на наиболее Вам понравившуюся кнопку. В архиве вот такие кнопки:
Скачать кнопки для плагина Scroll to Top
Хотя можно выбрать нужную кнопку на компьютере, а затем закачать только одну картинку в папку /public_html/images
Я Вам советую в корне блога (/public_html/) создать папку “images” и закачивать в нее изображения для таких вот случаев.
Вам еще не раз придется закачивать картинки от различных плагинов, скриптов — и чтобы быстренько закачать и прописать путь до нужного изображения, папка “images” в корне блога – это самый оптимальный вариант.
Вот такой путь будет в итоге: /public_html/images.(иногда вместо /public_html/ нужно вписать адрес своего сайта!)
Затем идем в настройки плагина Scroll to Top: “Админка – Параметры — Scroll to Top” и прописываем полный путь до картинки:
Т.к. папку “icons” я закачал в корень блога (в /public_html/), то после того, как я определился с картинкой, в поле ввода ссылки на картинку, я прописал путь до той кнопки, которую хочу видеть у себя на блоге (http://aimblog.ru/icons/UP1.png) Прописывайте путь до вашей картинки внимательно.
Вот что получилось:
Это я показал просто пример, Вы можете поставить любую кнопку “наверх”. Также кнопки можете найти в интернете или нарисовать в фотошопе.
Небольшое дополнение:
Если Вы решите скачать плагин через поиск в админке блога, то в директории WordPress, плагин Scroll to Top 1.2 не такой как я описывал выше, там другой плагин.
При скачивание и активации плагина из админки блога, кнопка «наверх» будет внизу и в середине статьи, примерно так:
Изменить цвет, ширину и текст в кнопке можете в «Админка — Параметры — Scroll to Top»
Так что имейте это ввиду. И если не хотите скачивать версию плагина из директории WordPress, тогда скачивайте Scroll to Top по моей ссылки.
С плагином Scroll to Top разобрались. У кого остались вопросы, задавайте в комментариях, отвечу с удовольствием. Теперь давайте сделаем кнопку «наверх» без плагина.
Как сделать кнопку “наверх” без плагина
Итак, для начала скачаем архив с файлами “verx.js” и “verx.gif” –скачать
Затем распаковываем скачанный архив и по FTP файл “verx.js” загружаем в корень блога (/public_html/);
Файл “verx.gif” закачиваем в папку /public_html/images.
Теперь, для того чтобы при нажатии на кнопку “наверх”, страница пролистывалась к началу плавно, необходимо подключить библиотеку jquery. Для этого блокнотом notepad++ открываем файл вашего шаблона “functions.php” и в самом начале, сразу после открывающего тега
Навигация по сайту — примеры как сделать навигацию удобной
Практические советы по созданию понятного сайта
Рассказываем, как помочь пользователю легко ориентироваться с помощью навигации по сайту. Статья будет полезна дизайнерам, предпринимателям и маркетологам, которые хотят создать удобный сайт самостоятельно. Поможет в этом продуманная навигация по сайту.
Мы рассмотрим 12 способов улучшения навигации на сайте с помощью простых инструментов за минимальное количество времени. В Тильде есть много готовых блоков с элементами навигации, из которых можно выбрать наиболее подходящий для вашего проекта вариант.
Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.
При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».
Советы и инструкции по дизайну удобного меню сайта
Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.
Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.
Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.
Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.
Меню также может быть навигатором внутри одной страницы, когда вы делаете лендинг или лонгрид.
Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.
Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.
Якоря и ссылки внутри страницы
Чтобы посетитель в любой момент мог найти нужный раздел, можно сделать фиксированное меню — оно всегда будет оставаться в поле зрения при скролле. Такая навигация для сайта будет хорошим решением.
Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».
Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.
В настройках Тильды можно установить дополнительные параметры отображения активного пункта меню. Есть несколько вариантов выделения активного пункта меню: можно изменить его насыщенность, непрозрачность и цвет.
Кроме того, активный пункт меню можно подчеркнуть или зачеркнуть.
Такие же настройки можно применить и для пункта меню, на который наведена мышь.
Не стоит переусердствовать, пункт меню достаточно выделить одним или двумя параметрами.
Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель.
Анимация загрузки страницы подскажет пользователю, что процесс идет, и контент загружается.
На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.
В настройках блока можно задать цвет индикатора загрузки. Лучше использовать цвет, который будет выделяться на фоне контента и не сольется с цветом меню или обложки.
Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.
Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.
Из двух соседних кнопок более важная должна визуально выделяться.
Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».
Самое простое — использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветной бордюр без заливки, либо фон нейтрального цвета.
Помимо настроек стиля кнопок в Тильде есть дополнительные настройки, где можно отрегулировать стиль кнопки при наведении на нее мышью. В настройках можно указать цвет, кнопки, бордюра, задать другие насыщенность, цвет и шрифт текста, а также добавить тень и отрегулировать скорость анимации при наведении.
Много однотипных элементов просматривать утомительно. Используйте кнопку, которая скроет часть элементов и покажет их только по клику.
Хороший прием — написать на кнопке какое именно количество элементов, она скрывает.Скрыть часть контента можно несколькими способами:
Кнопка «Показать еще». Она находится в разделе «Форма и кнопка» под номером BF703.
Текст в раскрывающихся блоках. Отличный вариант для длинных списков с услугами или ответами на вопросы. Его можно найти в разделе «Текстовый блок» под номером TX16.
Вкладки с раскрывающимся контентом. Находятся в разделе «Меню» под номерами ME602 и ME603. Эти блоки позволяют создавать на странице несколько вкладок и показывать разный контент по клику на соотвествующую вкладку в рамках одной страницы.
Кнопка «Наверх» помогает пользователю из любого места страницы быстро попасть в ее начало.
Она особенно полезна для удобной навигации на страницах со статьями и большим количеством контента. С ее помощью можно избежать долгой и нудной прокрутки вверх вручную или при помощи скроллбара.
В Тильде блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.
Не бросайте пользователя, который добрался до конца страницы. Как минимум, дайте возможность быстро вернуться к началу, либо перейти на главную или на следующую страницу.
Если вы сделали лендинг — самое время повторить призыв к действию. Если на странице находится статья, в конце можно поставить ссылки на другие статьи похожей тематики. В Тильде для этой цели можно использовать блоки из разделов «Плитка и ссылка» либо «Список страниц».
URL (Uniform Resource Locator) — это единообразный адрес, указывающий путь к интернет ресурсу. Иными словами, это ссылка, которая отображается в адресной строке браузера.
Названия разделов помогают пользователю ориентироваться на сайте по адресу и, к тому же, положительно влияют на релевантность страницы.
Для понятных упорядоченных URL адресов существует термин ЧПУ (человекопонятный URL).
ЧПУ состоит из понятных пользователю слов, а не из системного адреса (в Тильде системный адрес страницы будет выглядеть, например, так: /page4652188.html).
Первая часть (https://) показывает метод, который используется для получения доступа к интернет ресурсу. Протокол HTTP используется чаще всего. Вторая часть адреса — это имя вашего домена, адрес, по которому сайт можно найти в сети. Если сайт многостраничный, www.mysite.
com будет адресом главной страницы, все остальные разделы и подразделы по порядку прибавляются к адресу через косую черту.Если это одностраничный лендинг с разделами, лучше использовать якорные ссылки с понятными названиями, например #about или #contacts, так как они тоже отображаются в адресной строке.
Адрес страницы в Тильде можно поменять в разделе «Настройки страницы». Если вы хотите использовать несколько слов в адресе страницы, прописывайте их через дефис «-» либо через символ подчеркивания «_». Например, /about-us или /our_works.
Не загромождайте его большим количеством элементов и выделяйте активные пункты меню.
Акцентируйте внимание пользователя на значимых кнопках. Сделайте их ярче и задайте дополнительные настройки для анимации кнопки при наведении мышью.
Используйте индикатор загрузки страницы, который подскажет пользователю что контент в процессе загрузки и вот-вот появится.
Используйте индикатор прокрутки на длинных страницах или блок с точками, чтоб помочь пользователю понять, в каком месте страницы он находится.
Кнопка «Наверх» поможет пользователю быстро вернуться в начало страницы. Используйте ее на страницах с большим количеством контента для удобной навигации на сайте.
Избегайте «тупика» в конце страницы. Предложите пользователю просмотреть похожие материалы по теме страницы либо установите ссылки, которые ведут на главную, следующую или предыдущую страницы.
Пропишите понятные адреса страниц сайта, на лендинге проставьте якорные ссылки с названиями, соответствующими разделу. Это еще один способ создания навигации на сайте.