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

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

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

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

стрелка вверх

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

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

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

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

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

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

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

<div><a href="#" title="Вернуться к началу"  class="up" rel="nofollow"><img src="ссылка на изображение" alt="Вверх"></a></div>

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

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

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

стрелка вверх html
Кликабельно

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

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

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

Возможно вас заинтересует:  Как создать сайт на бесплатном конструкторе uCoz?

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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

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

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

<DIV ID = "toTop" ><img src="ссылка на изображение стрелки"></ DIV >

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

стрелка при помощи скрипта
Кликабельно

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

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

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

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

плагин scroll-top
Кликабельно

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

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

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

12 комментариев

  1. Первый способ самый верный, ибо лишние скрипты не есть хорошо!

    Ответить
  2. Советую поставить вот эту функцию для появления кнопки.

    ( $(window).scrollTop()>100 ) ? e.fadeIn(100) : e.hide();

    Ответить
  3. Я с вами согласен, стрелочку лучше сделать самому, плагин тут лишний. Я на своем сделал больше года назад и вполне доволен.

    Ответить
  4. Я плагином всегда ставлю…

    Ответить
  5. Пока что со скриптами у меня на Вы. И первое время буду пользоваться плагином. Возможно в дальнейшем и смогу понять что там написано в коде. Так как так будет куда легче разобраться что я там в файлы сайта добавил.

    Ответить
    • Артем, я тоже не программист и скрипты сам не пишу, но следуя инструкции любой пользователь сможет сделать стрелку вверх для блога.

      Ответить
      • Стрелку-то сделать не проблема. Так же, как и повторить указанное и вставить код в нужный файл и место. Я просто хочу понимать то, что я вставляю. К примеру, за что буква или символ(слово) отвечает в данном моменте. Вот я что хотел сказать.

      • Ясно 🙂 это конечно правильно.

  6. Виктор:

    Привет Андрей. Подскажи где нужно разместить код <DIV ID = что бы стрелка разместилась в правом нижнем углу как у тебя???

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *