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

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

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

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

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

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

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

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

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

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

1

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

1
2
3
4
5
6
7

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

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

Кликабельно

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

script type="text/javascript">
 
$(function() {
 
$(window).scroll(function() {
 
if($(this).scrollTop() != 0) {
 
$('#toTop').fadeIn();
 
} else {
 
$('#toTop').fadeOut();
 
}
 
});
 
$('#toTop').click(function() {
 
$('body,html').animate({scrollTop:0},800);
 
});
 
});
 
script>

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

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

1
2
3
4
5
6
7

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

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

1

 DIV >
                    

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

Кликабельно

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

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

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

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

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

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