Несколько способов как установить кнопку «Наверх»?

Добрый день! Давно пора заняться блогом и наконец таки разобраться, как же установить кнопку «Наверх», ведь еще давно некоторые мои читателя намекнули, что мол не плохо бы установить :)

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

В итоге решила описать несколько способов.

Устанавливаем кнопку Наверх с помощью плагина в WordPress



Это самый простой способ. Про плагины я уже рассказывала тут. Советую заглянуть всем, кто не в теме, что за зверь такой. И так нам понадобиться плагин Scroll to Top. Устанавливаем и активируем.

Дальше переходим к настройкам: Админка — Параметры - Scroll to Top

Плагин до ужаса простой, поэтому вы не запутаетесь.

Кнопка наверх в Вордпресс

  • Первая строка Enable: Enable — включить, Disable — выключить
  • Вторая строка Text: Написать текст
  • Третья строка Width: Длина
  • Четвертая строка Text Color: Цвет текста
  • Пятая строка BackGround Color: Цвет фона кнопки

Как это работает. Прокручиваете страницу вниз и по центру снизу появляется надписть: «Наверх! Виха!»

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

С этим разобрались. Едем дальше.

Кнопка наверх для сайта без плагина

1. Шаг первый. Скачивайте скрипт и закачиваете его в корень сайта(это то место где у вас папки, файл роботс, фавикон и другие штуки). Что бы скачать нажимаете на коробку.

Так же в коробке идет простая кнопка синего цвета. Ее загружаете так же как и скрипт, но в папку картинки.

2. Шаг второй. Копируете код и вставляете в (footer.php)

<a id="Top" href="#"><img src="http://www.incanta.ru/img/arrows.png" alt="" align="absmiddle" border="0" /></a><script type="text/javascript" src="http://www.incanta.ru/verx.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#Top").scrollTopInc(); });
// ]]></script>

В этом коде нужно заменить www.incanta.ru на ваш сайт. Два раза. А так же указать ваш пусть к картинке.

3. Шаг три. Заходим в стили (style.css) и вставляем этот код. Соответсвенно меняйте размеры, если будете использовать свою картинку.

#Top {
width: 200px; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; color: #666666; text-decoration: none;}

На этом все. Я сделала вместо кнопки — ракету. =)
Удачи!

Как установить красивые кнопки социальных сетей

Отзывов (3) на «Несколько способов как установить кнопку «Наверх»?»

  1. Валера:

    Маринка, привет! ты нам fin. стриптиз когда покажешь?! :-D

    Еще ты обещала какой-то интересный пост написать в конце сентября или октября, не помню уже точно...

  2. Спасибо за пост! Поставил кнопку без плагина по твоему рецепту — работает! Почему не хочешь поставить плагин для подсветки кода — интересней ведь будет, разве нет?

    Вообще, спасибо за полезный и красивый блог!

Ваш отзыв