Главная страница » Сайты » Как сделать кнопку наверх для сайта

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

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

В статье будут следующие части:

Для чего нужна эта кнопка
Простая кнопка на html
Плавающая кнопка на JavaScript

Для чего нужна эта кнопка?

Содержание

1 Для чего нужна эта кнопка?
- 1.1 Польза для посетителей
- 1.2 Польза для сайта
2 Простая кнопка наверх для сайта html
3 Плавающая кнопка наверх для сайта
4 Кнопка наверх: HTML+CSS
5 Кнопка наверх: JavaScript
6 Простая кнопка вверх для сайта
7 JQuery кнопка вверх для сайта
8 Нужна ли
9 Кнопка вверх, как Вконтакте
10 Второй способ кнопки наверх от Вконтакте
11 Третий способ кнопки наверх без плагина
12 Кнопка наверх для сайта WordPress.
13 Кнопка наверх для HTML сайта подключается аналогично.
- 13.1 Похожие по Тегам статьи

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

Польза для посетителей

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

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

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

Польза для сайта

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

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

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

Я рассмотрю два способа снабдить ваш сайт такой кнопкой. Первый будет ориентирован на простые сайты, для которых нет возможности или желания подключать какие-либо дополнительные библиотеки или Javascript.

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

Достоинства:

Простота и легкость настройки;
Не нужна поддержка библиотек и скриптов.

Недостатки:

Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
Перемещение вверх происходит не плавно, а мгновенно, рывком.

Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.

Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).

Дальше вам необходимо прописать стили созданного нами класса кнопки buttonup. Для этого открываем файл style.css и добавляем в конец следующий код:

Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.

Плавающая кнопка наверх для сайта

Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:

Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).

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

В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:

1. Подключение библиотеки jQuery

Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.

Для подключения библиотеки jQuery, вам нужно прописать в разделе <head></head> вашего сайта следующую строку:

2. Подключение скрипта, выводящего кнопку

Код скрипта можно вставить двумя способами:

либо поместить его целиком между тегами <head></head>,
либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.

Первый вариант проще, второй, на мой взгляд, удобнее.

Вот сам скрипт (автор Тимур Камаев wp-kama.ru):

Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.

Если вы будете использовать для скрипта отдельный файл, как это сделал я, то в него помещаете код, находящийся между тегами <script></script>, сами теги копировать в файл не нужно. Файл размещаете у себя на хостинге.

Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:

Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.

Картинка для кнопки

Для того, чтобы изображение кнопки менялось, файл картинки должен состоять из двух половинок, на одной изображается обычная стрелка, на другой активная стрелка (под наведенным курсором). Посетителю одновременно показывается только одна половина. У меня верхняя стрелка сделана полупрозрачной, вторая непрозрачная (яркая).

Заданные цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.

Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.

Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.

Код можно упростить, если удалить из него вот эту строку:

Она отвечает за изменение отображаемой части картинки при наведении курсора и если ее убрать, то кнопка всегда будет выглядеть одинаково. В этом случае вам не нужна будет картинка с двойным изображением, поставьте любую стрелку.

Несколько вариантов стрелок я сделал, а в интернете вы можете отыскать много готовых.

Как видите, создать красивый сайт самому несложно. На этом на сегодня все.

biznessystem.ru

Кнопка наверх: HTML+CSS

Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Кнопка наверх с помощью CSS - "Нубекс"</title>   <style>   .topNubex {  	position: fixed;  	right: 45px;  	bottom: 45px;   }   </style>   </head>   <body>   <div style="height:3000px"></div>   <a href="#" title="Вернуться к началу страницы" class="topNubex">Вверх</a>   </body>  </html>

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

Еще по теме: Какая самая быстрая флешка

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Кнопка "Вверх" при помощи JavaScript - "Нубекс"</title>      <style>   #topNubex {  	position: fixed;  	right: 45px;  	bottom: 45px;   }   </style>      <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) {   $('#topNubex').fadeIn();   } else {   $('#topNubex').fadeOut();   }   });   $('#topNubex').click(function() {   $('body,html').animate({scrollTop:0},700);   });   });   </script>   </head>   <body>      <div style="height:3000px"></div>      <div id="topNubex"><img src="topNubex.png" width="30px" height="30px" /></div>   </body>  </html>

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки «Наверх» на сайт.

nubex.ru

Здравствуйте! Пример скрипта можно посмотреть в этом блоге, когда вы прокручиваете страницу вниз, в правом нижнем углу появляется картинка-кнопка «Наверх», нажав на которую вы попадете к верхней шапке сайта.

Под каждым примером с картинкой вы найдете код (скрипт), который надо вставить перед закрывающимся тегом «</body>»

Три небольших момента для корректной установки:

Кодировка сайта должна быть в UTF-8, если будет другая то вместо русских букв — будут непонятные крякозяблики
Надо чтобы на сайте была подключена библиотека jquery. Подключить ее можно вставив в шаблоне сайта перед«</head>» следующий код:
```
    
```
Если у вас на сайте в дизайне прописан z-index (признак — не видно картинку {или видно, но только на некоторых участках сайта}), вам надо прописать в стилях к сайту следующую строчку:
```
  #topcontrol{z-index: 9999;}  
```
Если нужно изменть положение картинки то воспользуйтесь стилем margin:
```
  #topcontrol{margin-bottom: 50px;}  
```

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/1.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/2.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/3.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/4.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/5.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/6.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/7.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/8.js"></script>

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/9.js"></script>

10.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/10.js"></script>

11.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/11.js"></script>

12.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/12.js"></script>

13.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/13.js"></script>

14.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/14.js"></script>

15.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/.js"></script>

16.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/16.js"></script>

17.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/17.js"></script>

18.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/18.js"></script>

19.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/19.js"></script>

20.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/20.js"></script>

21.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/21.js"></script>

22.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/22.js"></script>

23.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/23.js"></script>

24.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/24.js"></script>

25.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/25.js"></script>

26.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/26.js"></script>

27.

  	<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/27.js"></script>

Простая кнопка «Наверх» без JavaScript

Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.

Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:

 ^Наверх

Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.

В стили вашего сайта, обычно они находятся в файле style.css надо вставить:

 .topbutton {   width:100px;   border:2px solid #ccc;   background:#f7f7f7;   text-align:center;   padding:10px;   position:fixed;   bottom:50px;   right:50px;   cursor:pointer;   color:#333;   font-family:verdana;   font-size:12px;   border-radius: 5px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   -khtml-border-radius: 5px;   }

Недостатки:

— Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.

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

Плюсы данного вида кнопки:

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

Кнопки прокрутки вверх и вниз на JQUERY

Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают.

Название: Кнопки прокрутки вверх и вниз на JQUERY
Ссылка: scroll.zip 57.72 KB
Формат: ZIP архив

В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.

Кнопка плавной прокрутки вверх при помощи JQuery

Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.

Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:

Скачать стрелку .png

HTML код:

Для вызова кнопки после основного контента страницы или перед тегом

web-ptica.ru

Привет, друзья. Сегодня я продолжаю делиться с вами полезными скриптами, а если говорить конкретно, то я расскажу вам историю о появлении на моем блоге кнопки вверх. Меня уже давно просили написать, как сделать такую же кнопочку, но мне было жалко «палить контору», но сегодня я вдруг передумал…

Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу 🙂

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

Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!

Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально 🙂 Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.

NB: это не первая вещь, которую я «позаимствовал» у Яндекса, месяц назад я обнаружил на одной из промо-страниц «секретные» кнопки шаринга, о чем писал на форуме.

15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!

alaev.info

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

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

Суть способа заключается в том, что мы при помощи HTML добавляем в самом конце страницы, перед закрытием тега body, код копки:

После чего нам нужно дописать несколько CSS-стилей:

Вот, что у нас получится:

Так же можно дописать стили, которые будут срабатывать при наведении указателя мышки:

При наведении кнопка будет становиться насыщеннее:

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

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

Еще по теме: Что такое Order Received

Суть способа заключается в подключении к сайту специального JQuery-плагина, который вы можете скачать по этой ссылке:

После скачивания архива вам нужно сделать следующее:

1.Разархивируем архив. В нем находятся три папки, которые нужно загрузить в корневую папку сайта на хостинге, или в папку с темой сайта. Это можно сделать при помощи FTP-клиента или через файловый менеджер хостинга.
Файлы index и readme.md для работы плагина не нужны, их можно не загружать на хостинг.
2.Далее нам нужно подключить скрипт плагина на страницах нашего сайта. Для этого нужно через Notepad++ подключиться к сайту по FTP и открыть файл страницы сайта или файл шаблона темы, в случае если сайт сделан на CMS.
Для WordPress нужно открыть файл подвала страницы с названием footer.php.
3.Перед закрытием тега <body> нам нужно вставить следующий скрипт:
4.Далее нам нужно подключить CSS-стили кнопки. Сделать это мы можем двумя способами:
1. 1.Можно подключить файл стилей плагина к сайту, добавив между тегами следующую строку:
2. 2.Или же можно поступить по-другому, и вставить стили плагина в файл стилей нашего сайта.
  Для этого нужно открыть файл ui.totop.css, который находится в папке css плагина, и скопировать все стили, которые находятся в нем.
  
  После чего открываем в Notepad++ файл стилей нашего сайта и в самом низу вставляем скопированные стили. После этого не забываем сохранить и выгрузить файл на хостинг.

Если все сделано правильно, то в результате мы получим вот такую кнопку вверх на страницах своего сайта:

Если вам не нравиться дизайн кнопки вы можете заменить изображение в папке img на свое. Это можно сделать при помощи PhotoShop, взяв за основу эту картинку и поменяв, к примеру, ее цвет.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Нужна ли

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

Данная функция — это некий элемент, который в определенных случаях улучшает юзабилити сайта. Вот в каких случаях, мы сейчас с вами и разберем.

Первый самый важный, а может и единственный случай, когда кнопка вверх нужна — это наличие огромного количества контента на странице. Если страница длинная, то довольно затруднительно ее листать в самый верх.

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

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

Исходя из этого имеются наиболее распространенные и самые действенные кнопки прокрутки вверх, которые действительно эффективно работают. Один из таких вариантов — это кнопка вверх, как в социальной сети Вконтакте. К реализации этого способа мы и переходим.

Кнопка вверх, как Вконтакте

Отличительной чертой данной кнопки является ее простота в использовании. Она имеет вид полосы прокрутки в левой части сайта, которая занимает всю высоту ресурса.

«>

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

Лично я рекомендую сделать такой способ, чтобы дать посетителям привычный вариант. Уверен, что процент пользования данной функции на сайте будет увеличен, что скажется на улучшении юзабилити сайта.

Сделать точной такую же реализацию, как Вконтакте не получится, но вот приближенный вариант — запросто.

Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.

Для загрузки скрипта можно разместить сам код между тегами <head></head> или перед закрывающим тегом </body> в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

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

В данном коде можно изменить некоторые параметры под себя.

Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.

Данный код можно разместить между тегами <head></head> в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом </body> в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.

«>

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

«>

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

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

«>

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

Для редактирования параметров в данном файле, его потребуется открыть с помощью редактора Notepad.

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

Второй способ кнопки наверх от Вконтакте

По данному способу я записал подробный видео-урок.

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

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

Состоит из 3х этапов:

Размещение скрипта на сайте;
Размещение кода, отвечающего за вывод кнопки;
Оформление с помощью CSS стилей.

Далее в статье я не буду объяснять, как и куда вставить тот или иной скрипт. Делайте все по аналогии с предыдущим пунктом.

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

Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.

Файл скрипта скачайте по кнопке ниже.

«>

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

Далее нужно вывести саму кнопку. за это отвечает следующий код.

Разместить его можно в самом низу сайта, перед закрывающим тегом </body> в файле footer.php.

«>

Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.

В зависимости от дизайна и структуры вашего ресурса, потребуется немного изменить некоторые параметры в данных стилях. Например, в строках 47 и 53 изменить параметр отступа слова «Назад» и «Наверх» от самого верха страницы соответственно

После редактирования всех файлов, можем смело загрузить их на хостинг и этот способ будет работать. Его реализацию можете посмотреть на моем блоге. Делайте на здоровье.

Мы переходим к следующему способу. Данный вариант уже будет содержать простую кнопку в правой нижней области экрана, нажав на которую, будет произведено перемещение верх страницы.

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

Реализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.

Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом </body>/

В строке 8 задаем отступ после которого будет доступна кнопка для прокрутки.
В строке 17 задаем значение скорости прокрутки (чем меньше, тем быстрее).

Далее необходимо прописать стили. Даю вам следующий код, который вы размещаете в свой файл CSS.

В 4й строке прописан отступ кнопки от правой границы экрана. Данный параметр вполне нормально смотрится на любом разрешении монитора. Поэтому, можно его не менять;
В 7й строке прописан путь к картинке, которая будет отображаться. Поэтому, вам необходимо найти изображение небольшого размера и загрузить его в папку images, которая лежит рядом с фалом стилей. Название в данном коде картинка имеет top.png. Можете назначить любое другое;
Ширина и высота изображения стоит по 60 пикселей. В 8 и 9 строках ширину и высоту соответственно можно изменить.

Третий способ мы также рассмотрели. Это, пожалуй, наиболее распространенный вариант на обычных сайтах. Вы его можете увидеть практически на любом блоге не движке WordPress.

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

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

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

Все. Останавливаюсь. Пока!

P.S. Неплохим вариантом дать возможность быстро попасть в начало страницы является размещение ссылок-якорей в тексте, при нажатии на которые можно сделать перемещение в любое место на странице. Данный вариант также очень хорошо работает в больших материалах и я его иногда использую. В данной статье также применил.

С уважением, Константин Хмелев!

kostyakhmelev.ru

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

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

Проще говоря откройте файл footer.php и перед закрывающим тегом вставьте нижеприведенный код:

<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> <div ID="toTop"></div>

Тут что можно настроить, так это появление-исчезание кнопки. Этот код копировать не нужно, он уже есть выше. Просто пример.

$('body,html').animate({scrollTop:0},800);

Если заменить значение 800, например, на 1000, то скролл наверх будет медленнее. Следующим шагом нужно открыть файл style.css и добавить в самое окончание следующие строчки кода:

/* --------- ширина и высота контейнера должна соотв. размеру картинки -----------------меняете картинку, меняйте и размер контейнера*/ #toTop { width:50px; /* ширина контейнера 50px*/ height: 50px; /* высота контейнера*/ background:url(/img/top.png) no-repeat; /* путь к картинке 50 на 50px*/ opacity: 0.7; /* небольшая прозрачность*/ position:fixed; bottom:10px; /* отступ кнопки от нижнего края страницы*/ right:10px; /* отступ кнопки от правого края страницы*/ cursor:pointer; /* активный курсор при наведении*/ display:none; } #toTop:hover{ opacity: 1; /* непрозрачность при наведении*/ }

В коде я все прокомментировал и вы с легкостью сможете поменять значения на нужные именно вам.

Теперь скачайте папку с картинкой для нашей кнопки наверх для сайта, распакуйте и закиньте ее в каталог вашей активной темы вместе с папкой img.

Если кто сомневается как это сделать, в помощь статья «Как прописать путь к файлу, папке на хостинге»

Скачать картинку

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Хотя WordPress уже по умолчанию имеет в наличии подключенную библиотеку jQuery. Я тестировал кнопку на многих шаблонах WordPress и нигде мне не приходилось подключать jQuery.

Кнопка наверх для HTML сайта подключается аналогично.

— Если вам пригодилась моя статья «Кнопка наверх для сайта», жмите кнопки соц сетей.