- Для чего это необходимо
- Польза для посетителей
- Польза для интернет-ресурса
- Как сделать кнопку "вверх" на сайте самостоятельно
- Изображение кнопки
- Файл со скриптом кнопки «вверх»
- Установка на сайт
- Создание стиля кнопки в CSS
- Кнопка "вверх" для сайта на Wordpress
- Кнока "вверх" для Joomla
- Кнопка "вверх" для Ucoz
- Заключение
Такая функция, как кнопка "вверх" для сайта, делает интернет-ресурс более удобным для его посетителей. Она помогает с легкостью переместиться из любой точки страницы в ее верхнюю часть. Это просто необходимо для интернет-магазинов и сайтов с большими статьями, требующими долгой прокрутки вниз.
Для чего это необходимо
На данный момент на большинстве сайтов такой функции, как кнопка «вверх», нет, и в этом нет ничего критичного. Но ее использование может принести много плюсов как для интернет-ресурса, так и для его посетителей.
Польза для посетителей
Вам будет интересно:Как сделать ссылку картинкой
Часто бывает, когда страница интернет-ресурса сильно нагружена объемом информации, когда информационная статья занимает много места и приходится прокручивать страницу вниз при помощи колесика мыши. В плюс к этому, в конце статьи может присутствовать множество комментариев к ней.
Когда посетитель читает статью, ничего утомительного в прокрутке вниз страницы нет, но когда текст подошел к концу и надо перемещаться вверх, то это начинает немного утомлять. Большинству людей будет просто лень вести долгую прокрутку, и они просто закроют сайт, вместо того чтобы еще прогуляться по его просторам.
Вам будет интересно:Как редактировать шаблон DLE
Использование кнопки для мгновенного перемещения к верху страницы делает времяпрепровождение на сайте более удобным.
Польза для интернет-ресурса
Положительные стороны для самого ресурса исходят из прошлых факторов, ведь упрощенное перемещение по сайту улучшает поведенческие факторы, так как все посетители будут более активны в своих действиях и перейдут на другие страницы.
Тем самым данные поведенческие факторы влияют на отношение всех поисковиков к сайту и приводят к улучшению места в поисковой выдаче.
Как сделать кнопку "вверх" на сайте самостоятельно
Разбираемся дальше. Кнопку прокрутки вверх для сайта на любой из CMS всегда можно сделать самостоятельно, выполнив лишь несколько крайне простых шагов:
- создание изображения;
- создание скрипта;
- создание стиля кнопки;
- добавление на сайт.
Изображение кнопки
Вам будет интересно:Как подписать фотографию
Чтобы добавить кнопку "вверх" на сайте, для начала потребуется сделать саму иконку, при нажатии на которую пользователь переместится вверх страницы. Для этого можно использовать готовые варианты, среди которых всегда можно подобрать наиболее подходящий.
Чтобы улучшить вид кнопки, необходимо сделать некоторые доработки, а именно сделать спрайт, позволяющий на основе CSS объединить фоновые картинки, тем самым сотворив из них анимацию.
Для графических работ можно воспользоваться любым редактором. Но самым удобным вариантом будет онлайн-сервис PIXLR, так как скачивать здесь ничего не нужно и можно пользоваться им прямо в браузере.
Для начала работы в появившемся окне редактора нужно выбрать поле «Загрузить изображение с компьютера». В качестве примера возьмем изображение ракеты.
Если габариты выбранной иконки слишком велики, то потребуется сделать небольшую корректировку размеров. Для этого необходимо перейти в верхнее меню и выбрать поле «Редактировать», а после «Free transform…»
Далее рядом с картинкой появляются специальные маркеры, перемещая которые, можно изменить размер изображения. Для сохранения пропорций можно использовать клавишу Shift, зажав которую, нужно перемещать голубые маркеры. В конце данных действий получается изображение ракеты.
Следующее действие – создание копии слоя.
Теперь необходимо переместить картинку ракеты из нового слоя немного вверх. Для этого будет удобно использовать инструмент перемещения, который располагается во второй колонке левого меню, и стрелку «вверх» на клавиатуре.
Теперь нужно сделать верхнюю картинку черно-белой. Это можно сделать при помощи пункта «Коррекция» - «Цветовой тон/Насыщенность» в верхнем меню. Для полного обесцвечивания ползунок «Насыщенность» должен принять значение -100. Данное действие позволит сделать эффект, при котором кнопка «Вверх» будет превращаться из черно-белой в цветную при наведении на нее.
Последний штрих – удаление лишнего пространства вокруг двух картинок. Для этого выбираем пункт «Обрезка» из левого меню и выделяем в прямоугольник лишь две ракеты. Для совершения обрезки нажимается клавиша Enter.
Получилось изображение, в котором нет лишнего свободного пространства. Потребуется записать значения ширины и высоты получившейся картинки, так как эти данные будут полезны на следующем шаге.
Вам будет интересно:Как изменить размер шрифта в компьютере
Для сохранения нужно нажать на «Файл» - «Сохранить», где в левом пункте «Мой компьютер» записываем имя изображения (только английская раскладка), выбираем формат (в данном случае – PNG) и нажимаем кнопку «Да».
Файл со скриптом кнопки «вверх»
Писать скрипт в данном случае не нужно. Можно будет воспользоваться общедоступным вариантом, внося в готовый код некоторые поправки.
Для этого потребуется скачать любой редактор кода. Самый популярный и к тому же бесплатный вариант – это Notepad ++. После его установки нужно скопировать и вставить в него весь данный код:
Далее нажимаем в верхнем меню «Файл» - «Сохранить как…», после чего сохраняем код в формате .js. После этого можно использовать данный код на своем сайте, загрузив на него файлы скрипта и изображения при помощи FTP-соединения.
Установка на сайт
Для установки кнопки прокрутки вверх для сайта, нужно разместить в требуемом месте код. Вписывать его нужно перед тегом