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

Автор Damir-Tote. Опубликовано в Блог, Гаджеты Блогспот

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

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

Примеры кнопки наверх для сайта

Каждый пример содержит одну и ту же структуру, единственное отличие – это картинка, которая будет отображаться на Вашем сайте в правом нижнем углу. Вам нужно только подобрать изображение под Ваш сайт. Итак, поехали!
 
Пример 1: Установлен на моем блоге.
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх1.js'/></script>
 
Пример 2:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх2.js'/></script>
 
Пример 3:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js"></script>
<div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх3.js'/></script>
 
Пример 4:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх4.js'/></script>
 
Пример 5:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх5.js'/></script>
 
Пример 6:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх6.js'/></script>
 
Пример 7:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх7.js'/></script>
 
Пример 8:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх8.js'/></script>
 
Пример 9:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх9.js'/></script>
 
Пример 10:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх10.js'/></script>
 
Пример 11:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх11.js'/></script>
 
Пример 12:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх12.js'/></script>
 
Пример 13:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх13.js'/></script>
 
Пример 14:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх14.js'/></script>
 
Пример 15:
 
<script type="text/javascript" src="http://fghrtghjyjtyjytj.googlecode.com/files/наверх%201.js">
</script><div style='display:none;'><a href='http://www.damir-tote.ru/'>blogger</a></div>
<script src='http://damir-tote.googlecode.com/files/наверх15.js'/></script>
 
На этом примеры мои закончены. Правда можно было бесконечно много примеров использовать, но остановимся на этих 15.
 
Если Вам была полезна данная статья, то жмите ретвит, расскажите друзьям.

Куда установить кнопку наверх

Приведу примеры на основе сайтов и блога Blogger. Мне ближе всего Blogger, с него и начну.

Кнопка вверх для Blogger

Для установки кнопки наверх в Bloggerнам потребуется открыть Панель инструментов – Дизайн – Создать новый гаджет – HTML/Javascript и вставить один из понравившихся примеров кнопки наверх. Сохраняем гаджет и обновляем страницу своего блога. Вот и все действия, легко.

Кнопка вверх для Joomla

Необходимо вставить код в файл index.php, который расположен по адресу домен/templates/ваша_тема и установить прямо перед тегом </body>.

Кнопка вверх для WordPress

В панели администратора в разделе Внешний вид – Редактор в файле  footer.phpвставляем код перед закрывающим тегом </body>.

Кнопка наверх для Ucoz

Заходим в редактирование шаблона. Управление дизайном и ищем в самом конце закрывающий тег </body> и также перед ним вставляем код одного из примеров выше.

Для других CMS кнопка наверх

Если вы уже имели опыт вставки счетчиков LiveInternet, Яндекс Метрика или же пузомерок ТИЦ и PR, то вы знаете их расположение. Так вот, копируем код кнопки вверх и вставляем в то же самое место, где расположены эти счетчики. Самое простое решение для всех CMS(движков).

Трекбэк с Вашего сайта.

  • Batyanya

    Спасибо. Поставил на свой сайт profisam.ru. Пробовал много других вариантов, но этот — самый быстрый, а главнее — рабочий.

  • Валерий Кондратюк

    Спасибо! Давно искал эти кнопки! Поставил на свой блог http://www.workaz.ru — теперь он еще более функционален! Хотелось бы еще виджет на «Советую почитать» или «Похижие посты» найти! А то что то нигде не могу найти! И случайные странички с фотками вверху! Если есть такая возможность сообщите как нить!