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

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

Кнопка вниз для блога или сайта – очень полезная вещь. Например, человек хочет оставить комментарий к статье, а комментариев на блоге больше сотни. Он будет прокручивать до посинения страницу, возможно даже он не дойдет до формы отправки сообщения и не оставит свои мысли.

Недавно я установил себе кнопку "Вверх" на блог, с помощью плагина "Scrool to Top", и удивился большому коду, который создает сам плагин на блоге. А ведь это только маленькая кнопка "Вверх" для блога, так ведь на блоге стоят еще и другие плагины.

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

В коде СSS шаблона вашей темы вставляем вот такой код:

.totop {padding: 7px 5px 7px 10px; background: #fff; border: 1px solid #eee6e6; border-radius: 10px 0 0 10px; font: bold 14px «Trebuchet MS», Arial, Helvetica, sans-serif; color: #777; position: fixed; right: 0; top: 50%; margin-top: 100px;} 

.totop2 {padding: 7px 5px 7px 10px; background: #fff; border: 1px solid #eee6e6; border-radius: 10px 0 0 10px; font: bold 14px «Trebuchet MS», Arial, Helvetica, sans-serif; color: #777; position: fixed; right: 0; top: 50%; margin-top: 150px;}

Ну и добавляем ссылку, этот код вставляем перед закрывающим тегом </head>

<a href="#top" class="totop" id="up">Наверх</a>
<a href="#footer" class="totop2" id="up2">Вниз</a>

Как видно из ссылки, первая ссылка делает кнопку "Наверх", и сообщает браузеру, что надо быстренько перейти вверх.

2 ссылка делает кнопку "Вниз" и сообщает браузеру, что надо идти вниз.

Есть также другой способ сделать кнопку, в виде картинки, смотреться будет не хуже первого варианта.

Также вставляем перед тегом (если не работает, то вставляем в футер)

<div id="toTop" style="display: block;"><a href="#top" title="Наверх" id=”up”><img src="Путь к вашей картинке"></a></div><div id="toTop2” style=”display: block;”><a href=”#footer” title=”Вниз” id=”up2”><img src=”Путь к вашей картинке”></a></div>

Ну и вставляем код в СSS файл, чтобы поместить кнопку в правом нижнем углу.

#toTop { position: fixed; bottom: 100px; right: 10px; }
#toTop2 { position: fixed; bottom: 27px; right: 10px; }

С этими настройками нужно разобраться точнее, строка bottom — это отступ снизу, в первой строчке отступ больше 100px, а в нижнем отступе меньше 27 px, поближе к низу, т.е. меняем отступы.

А вот и наша кнопочка:

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

Если хотите использовать такую кнопочку на Jquery, пользуйтесь плагином Scrool to Top, пусть он и добавляет код в шаблон, зато переход выглядит плавно и красиво.

Если найду способ создания кнопки вверх для блога с помощью Jquery без плагинов, то обязательно напишу в блог

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

Комментируем и обсуждаем ребята, не остаемся в стороне.

Ваш, Seobiznez