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

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

Зачем вообще нужна кнопка или стрелка вверх для сайта? Все просто, это делается для удобства пользователей. Почти все блогеры пишут огромные статьи по 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 можно творить чудеса на блоге 🙂 но мы ничем таким заниматься не будем, а просто сделаем стрелку вверх.

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 тоже можно подключить, но только если у вас премиум аккаунт.

Поделись информацией:
Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Подписка на рассылку

Комментарии
  1. Максим

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

    • Андрей Назыров

      Согласен 🙂

  2. Андрей Зимин

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

  3. Андрей Назыров

    Ну раз советуете, то надо было и CSS классы дописать 🙂

  4. seoonly.ru

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

  5. Артем

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

    • Андрей Назыров

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

      • Артем

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

      • Андрей Назыров

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

  6. Виктор

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

    • Андрей Назыров

      Привет, Виктор. В файле footer.php gперед закрывающимся тегом < /footer >

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