Урок 65 Как сделать кнопку наверх на сайте на wordpress?

03.09.20167321

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

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

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

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

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

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

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

  • Найти рисунок - кнопку, при нажатии на которую пользователь будет перемещаться вверх. Такая картинка может быть в виде стрелки, надписи и так далее.
  • Установить код и сам ява скрипт.

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

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

<noindex><a href="#" id="toTop">Наверх</a>
<script src="http://ваш_сайт.ru/naverh.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script></noindex>

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

Я к сожалению не программист поэтому не скажу как это сделать, самому надо такое. Если кто соображает буду рад подсказке. Свою кнопку вы можете визуально изменить с помощью css. Для этого укажите нужные стили. В конце файла стилей пропишите #totop и укажите желаемые свойства, каждый с новой строки, например:

#totop {
      width: 100px;
      background: #A2S2D1;
} 

и так далее. Можно менять цвет, фон, размер шрифта и сам шрифт, практически что угодно, если знаете, как пользоваться css.

Как сделать кнопку наверх с помощью плагинов

Есть такой плагин Scroll To Top который за минуту помогает сделать симпатичную и простую кнопку вверх. Такую кнопку удобно ставить если вы владелец сайта на WordPress ибо в других системах этот плагин работать не будет.

Что примечательно нам достаточно только установить плагин и наша кнопка наверх уже будет работать. Останется только с помощью Css изменить ее внешний вид. В настройках можно указать:

  • Текст надписи.
  • Ширину кнопки.
  • Цвет надписи и фона кнопки.

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

Рекомендую прочитать:

Следующий урок: Как заработать на букмекерской конторе.

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