Как сделать кнопку или стрелку вверх для блога?

Всем привет! Давно собираюсь сделать кнопку или стрелку вверх для блога, но все откладывал. Сегодня наконец-то ее сделал, и решил написать небольшой пост на эту тему.

Зачем вообще нужна кнопка или стрелка вверх для сайта? Все просто, это делается для удобства пользователей. Почти все блогеры пишут огромные статьи по 3-10К символов, а кроме обычного текста, обязательно присутствует 2-3 изображения. В результате получается объемная страница, которую не очень удобно скроллить, чтобы вернуться в верхнюю часть страницы.

Кнопки или стрелки вверх используют не только блоги, их можно увидеть и в соц. сетях, таких как Одноклассники и ВКонтакте. Думаю очевидную пользу от этого мелкого дополнения вы поняли, теперь на примере покажу как сделать это удобство для своего блога или сайта. В качестве подопытного будет мой блог 🙂

Стрелка вверх для сайта

Способов сделать стрелку вверх для сайта немало. Одни используют дополнения в виде плагинов, другие используют JQuery и JavaScript. Что выбрать решать только вам.

Стрелка вверх на блог при помощи HTML и CSS

Самый простой способ сделать стрелку вверх для сайта, использовать обычную ссылку в виде картинки, оформленную CSS стилями. Делается это просто.

1. Подберите подходящую картинку в виде стрелки и загрузите в библиотеку изображений или в корневую директорию сайта.

2. Вставьте html код в подвал сайта (footer.php) перед закрывающимся тегом < /footer >:

3. Вставьте код стилей в файл style.css:

.up {  width:80px; /* ширина стрелки */  position:fixed; /* фиксированное положение */  bottom:50px; /* отступ от нижней части экрана */  right:50px; /* отступ справа */  cursor:pointer; /* вид курсора при наведении */  }

4. Любуйтесь только что созданной стрелкой вверх 🙂

Единственный минус этого метода – статичность стрелки. То есть стрелка будет видна всегда, даже если вы находитесь в верхней части сайта, в то время как стрелка, созданная при помощи JQuery и JavaScript будет появляться плавно при прокрутке страницы вниз, а так же плавно прокручивать саму страницу при нажатии на стрелку.

Среди плюсов, минимальная нагрузка на сам ресурс, так как отсутствуют скрипты.

Стрелка вверх для сайта при помощи JQuery и JavaScript
При помощи JavaScript и подключенной библиотеки JQuery можно творить чудеса на блоге 🙂 но мы ничем таким заниматься не будем, а просто сделаем стрелку вверх.

1. Копируем скрипт и вставляем в файл header.php перед закрывающимся тегом < /head >

// 

2. Закачиваем изображение подходящей стрелки в корневую директорию сайта.

3. Вставляем код стилей для стрелки вверх в файл style.css

#toTop {  width:80px; /* ширина стрелки */  position:fixed; /* фиксированное положение */  bottom:50px; /* отступ от нижней части экрана */  right:50px; /* отступ справа */  cursor:pointer; /* вид курсора при наведении */  }

4. В файл footer.php или в любое место, где хотите вывести стрелку, вставляем вот такой код:

5. Обновляем страницу и смотрим на результат.

Если вас не устраивает стрелка, аналогичным способом можно вывести кнопку, закачав ее изображение. А еще лучше, если для кнопки использовать стили CSS вместо изображения – фон, шрифт и т. д.

Стрелка вниз вверх для сайта

Стрелка вверх/вниз для сайта на WordPress легко реализуется простеньким плагином. Называется он Scroll Top and Bottom. Скачать плагин можно на официальном сайте вордпресс.

Настроек у плагина почти нет, просто скачиваем, активируем и выбираем дизайн стрелок. Вот как это примерно будет выглядеть:

Кнопка вверх для сайта ucoz

Вообще для uCoz написано столько скриптов, что не вижу смысла повторять за кем-то. Лишь дам небольшой совет новичкам, на uCoz не будут работать PHP скрипты, так как юкоз сайты постороены на HTML и CSS. Точнее PHP тоже можно подключить, но только если у вас премиум аккаунт.