S1
Колодезный пер., д. 2А, стр. 1 107076 Москва, Россия
+7 (499)340-64-04, +7 (499)340-64-04, info@s1-agency.ru

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

Многие наверняка задавались вопросом “Как сделать кнопку на верх” для своего сайта, чтобы посетителям было удобно подняться на верх (вверх) страницы, за один клик, чем судорожно листать колесиком мыши или двигая ползунок прокрутки. В этой статье мы научимся создавать кнопку на верх для сайта, и устанавливать ее на cms Joomla, WordPress и Ucoz.Сегодня мы поговорим о том, как же сделать ваш сайт более удобным для посетителей. И будет сделана плавающая кнопка вверх для сайта, для того, чтобы посетители не перематывали долго и муторно весь прочитанный текст, чтобы попасть на верх страницы одним нажатием. Однозначно это удобная и важная функция для сайта, И важно обращать внимание на повышение юзабилити сайта, потому как чем удобней посетителям, тем дольше они будут на нем находиться и больше вероятность, что зайдут к вам снова.Есть различные способы создания кнопки “на верх”, сегодня мы рассмотрим создание с помощью jQuery. Что замечательного, что данный способ можно использовать практически на любом сайте, созданном на любой CMS и даже на простом html сайте.

Шаг 1. Вставка кнопки вверх/на верх страницы.

Кнопка будет работать как ссылка на верх страницы, для этого в самый низ кода шаблона, перед закрывающим тегом </body> ставим следующий код:
Как на сайте сделать кнопку подняться на верх.<a href=”#” id=”toTop”><img src=https://s1-agency.ru/images/up1.png border=”0″ align=”absmiddle” /></a>
<script src=”https://s1-agency.ru/js/toTop.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
$(“#toTop”).scrollToTop();
});
</script>

Данный текст необходимо, чтобы был на каждой странице вашего сайта, он вызывает скрипт кнопки вверх и присваивает картинку. Если у вас динамический сайт (все CMS, такие как Joomla, WordPress, Drupal и другие CMS являются динамическими, то есть страница формируется в момент обращения к ней), то целесообразно разместить в шаблоне, если вы используете на сайте несколько шаблонов, то тогда во всех используемых шаблонах, а в противном случае, в шаблонах которых вы не указали не будет этой кнопки.

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

Для кнопки вверх WordPress. В административной панели, справа в разделе “Внешний вид”->”Редактор”, в файле footer.php между тегами <body></body>, я в основном вставляю прядо перед тегом </body>.

Кнопка вверх для UCOZ. В редактировании шаблона (Управление дизайном — Нижняя часть) в самый низ кода перед закрывающим тегом </body>.

Для других CMS и статических сайтов. Если вы уже вставляли счетчики Яндекс Метрика, LiveInternet, то этот код необходимо вставить в тоже место, куда вы и вставляли код для счетчиков. В основном это файлы index.html, index.php шаблонов. Если у вас статический не на cms, то необходимо прописать в каждой странице.

Шаг 2. Задать стили для кнопки вверх/на верх страницы.

Необходимо будет создать стили и расположение кнопки наверх. Для этого вам необходимо будет скопировать следующий текст:
#toTop {
position: fixed;
bottom: 20px;
right: 2px;
background: none;
cursor: pointer;}

Их необходимо скопировать туда, где у вас располагаются CSS стили, в основном это файлы с расширением CSS. Какие именно файлы для ряда CMS читайте ниже. Эти данные можно менять, тем самым меняя оформление кнопки на верх.

Кнопка на верх для Joomla. Вставляем в ваш_сайт/templates/ваша_тема/CSS файлов там с расширением css может быть много, скорее всего это template.css или general.css.

Кнопка на верх для WordPress. Скопировать этот текст в самый низ файла wp-content/themes/ваша_тема/style.css или через административную панель, справа в разделе “Внешний вид”->”Редактор”, файл style.css.

Кнопка наверх для Ucoz. Вставить в низ в Управление дизайном сайта – Таблица стилей (CSS).

Для других CMS и статических сайтов. Там где задаются стили для вашей страницы, вставить этот код.

Шаг 3. Сохранить картинку и скрипт.

Набор картинок для кнопки на верх я расположил ниже на этой странице. Необходимо сохранить на вашем сайте картинку в той папке где хранятся у вас картинки и сменить на шаге 1 мой адрес img src=https://s1-agency.ru/images/up1.png на свой.

Далее нужно создать файл TXT, открыть блокнотом и внести в него следующий текст:
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(“href”);if($(window).scrollTop()!
=”0″){$(this).fadeIn(“slow”)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=
=”0″){$(scrollDiv).fadeOut(“slow”)}else{$(scrollDiv).fadeIn(“slow”)}});$(this).click(function(){$(“html, body”).animate({scrollTop:0},”slow”)})}});

Сохранить и сменить имя и расширение на toTop.js.

Этот скрипт кнопки на верх прячет ее, когда вы находитесь вверху страницы и показывает, когда вы начинаете опускаться вниз. Также этот скрипт на верх, задает скорость прокрутки страницы. Его необходимо загрузить на свой сайт, в произвольную директорию. И сменить на шаге 1 мой адрес “https://s1-agency.ru/js/toTop.js” на свой.

Шаг 4. Подключить jQuery.

На многих сайтах, этот скрипт не будет плавно переносить вверх, а просто будет добавлять “#” и перезагружать сайт, это потому, что jQuery не подключен. Его необходимо подключить. У некоторых, у кого на сайте работает уже что то, на jQuery, то наверняка он уже подключен и не стоит заново подключать. Чтобы подключить jQuery к сайту, необходимо выполнить следующие действия:

Открываете в текстовом редакторе (я использую Notepad+) для редактирования:

Для Joomla. Тот же файл, который правили на шаге 1.

Для WordPress. В редакторе шаблона файл header.php используемой темы.

Для Ucoz. По умолчанию на каждом uCoz-сайте уже подключена jQuery-библиотека, подключается она следующим образом, заходите Дизайн-Редактор страниц-Страницы сайта и Главная страница (если она на отдельном шаблоне). И на этих страницах, в самом низу, перед закрывающим тегом </body> и нужно разместить код скрипта.

Для других CMS и статических сайтов. Если сайт статический (не используется ни какая CMS – движок) – поочередно все страницы сайта, для динамических сайтов на других CMS – ту часть шаблона (темы) где расположена секция HEAD. Находите секцию HEAD – все что находится между открывающим и закрывающим тегами: <HEAD></HEAD> и добавляете в самый ее конец, перед закрывающим тегом </HEAD> следующий код.

Вариант 1
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>

В данном случае он подключает jquery с google, если вы не хотите использовать со стороннего ресурса, то используйте второй способ.

Вариант 2

Вам необходимо скачать JQuery с сайта производителя, если браузер не скачивает этот файл, то после его открытия можете его сохранить как. Закачиваем файл скрипта на ваш сайт и прописываем к нему путь:
<script src=”https://s1-agency.ru/templates/beez_20/js/jquery-1.7.2.min.js”></script>

Смените адрес к своему скрипту и обязательно, чтобы начинался с http://.

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

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

Стрелка наверх может выглядеть по-разному. Я решил Вам немного упростить работу и подобрал картинки, перевел их в формат PNG, вырезал фон, чтобы они были прозрачны. Сделал размер максимум 80px, больше вам думаю не понадобиться. Можете спокойно ими пользоваться. Редактируйте: меняйте цвет, размер, добавляйте фон и текст. Для того, чтобы скачать их, наведите на понравившуюся картинку, нажмите правую кнопку мышки и выберете сохранить картинку.

Стрелка для сайта 1 Стрелка для сайта 2 Стрелка для сайта 1 Стрелка для сайта 2 Стрелка для сайта 1

Стрелка для сайта 2 Стрелка для сайта 1 Стрелка для сайта 2 Стрелка для сайта 1 Стрелка для сайта 2

Стрелка для сайта 1 Стрелка для сайта 2 Стрелка для сайта 1 Стрелка для сайта 2 Стрелка для сайта 1 Стрелка для сайта 2 Стрелка для сайта 2

Как сделать вместо картинки текст для кнопки на верх.

Для этого вам необходимо будет сделать следующее:

Строку:
<a href=”#” id=”toTop”><img src=https://s1-agency.ru/pict/kak-na-saite-sdelat-knopku-podnyatsya-na-verh.gif border=”0″ align=”absmiddle” /></a>

Замените на:
<a href=”#” id=”toTop”>Наверх</a>

И изменить CSS на:
#toTop {
width: 89px;
height: 24px;
background: #D9DAEE;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: fixed;
bottom: 30px;
right: 2px;
text-align: center;
text-decoration: none;
font-size: 12pt;
color: #1A2534;
cursor: pointer;}

Текст может быть различный, но я предложу несколько вариантов “Вверх”, “На верх”, можете также добавить символы, показывающие вверх. С помощью CSS вы можете сделать различный дизайн кнопки, добавить тень, сделать округлой или наоборот прямоугольной, поиграть цветом текста и фона. Я думаю, мы с вами ответили на вопрос стаявший в самом начале “как сделать кнопку вверх для сайта”. Надеюсь данная статья была для вас полезна.

Нужно продвижение?
По хорошей цене?
С финансовой гарантией результата?
Остались вопросы?
наш телефон:
Чат с менеджером