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

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

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

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

Существует множество различных плагинов для сайта на движке wordpress, да они улучшают его роботу, но не забывайте и тот факт, что они и тормозят скорость загрузки сайта, а это не есть хорошо. Если все таки хотите воспользоваться плагином, для установки на сайт кнопки вверх, вам поможет плагин Scroll to Top. В таком случае, советую почитать статью моего сайта о том как ускорить загрузку сайта на движке wordpress. А я расскажу вам, как устанавливается кнопка наверх с помощью скрипта, который сможет установить любой владелец своего сайта за 5 минут.

И так. Ниже, в конце статьи, я предоставляю скрипт, который установлен у меня. Ссылку от индексации я закрыл, не переживайте :-). Но для начала покажу, что в нем вы можете поменять по своему желанию.

Выделю три момента, которые можно менять.

1. Вы можете выбрать место, где поместить стрелку: справа или с лева. Как это сделать? Золотым цветом я выделил тот участок скрипта, который отвечает за сторону размещения  стрелки. В данном случаи, в правой стороне. Чтобы сделать скрипт с лева, удалите в нем слово right выделенный золотым, и поместите на его место слово — left .

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

3. Ну и красным цветом выделена ссылка, которая отвечает за изображение стрелки. Вот предоставляю некоторые варианты изображений, выбирайте ссылку напротив понравившейся стрелки, копируйте и вставляйте за место красной надписи.

  https://sites.google.com/site/poleznoznat/r1.png

 https://sites.google.com/site/poleznoznat/r2.png

 https://sites.google.com/site/poleznoznat/r3.png

 https://sites.google.com/site/poleznoznat/r5.png

 https://sites.google.com/site/poleznoznat/r6.png

 https://sites.google.com/site/poleznoznat/r7.png

 https://sites.google.com/site/poleznoznat/r8.png

 https://sites.google.com/site/poleznoznat/r9.png

 https://sites.google.com/site/poleznoznat/r10.png

 https://sites.google.com/site/poleznoznat/r11.png

 https://sites.google.com/site/poleznoznat/r12.png

Будем считать, что вы редактировали скрипт под свой сайт, по своему желанию, ну или вас полностью устраивает мой вариант. Копируете этот скрипт, заходите в административную панель вашего сайта → внешний вид → редактор → footer.php (подвал), и в конце этого шаблона после закрывающего тега </div>, вставьте скопированный скрипт, и сохраните изменения. Все, «кнопка наверх для сайта» установлена. Теперь чтобы попасть наверх сайта, не нужно 100 раз крутить скролом, а достаточно просто нажать на стрелку.

 

(Перед изменением, какого либо кода на сайте, его желательно скопировать и сохранить в блокнот, во избежание ошибок!)

скрипт для вставки:

<script type=»text/javascript» >

var smoothJumpUp = function() {

if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {

window.scrollBy(0,-50);

setTimeout(smoothJumpUp, 20);

}

}

</script>

<div id=»topcontrol» style=»position: fixed; z-index: 100500; bottom: 5px; right: 5px; cursor: pointer; opacity: 1; » title=»Мне на верх«>

<noindex><a href=»javascript:smoothJumpUp()»>

<img src=»вставить ссылку сюда«rel=»nofollow»/>

</a></noindex></div>

Вот как вставил скрипт кнопки наверх я. Может это кому поможет.

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

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

P.S: Возникнут сложности обращайтесь в раздел «связь со мной»

Форма2

Получайте новые материалы на свою email-почту

* Конфиденциальность гарантирована.
Комментарии
«Кнопка наверх для сайта с помощью скрипта» (25) отзывов
  1. Сергей:

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

    • Здравствуйте Сергей. Кнопка на верх для сайта, дает вам право выбора. К примеру: если в пятиэтажном доме есть лифт, вас же никто не заставляет подниматься именно им, можно же и пешком пройтись. 🙂

  2. Наталья:

    спасибо за интересные и полезные статьи! 😉

  3. сергей:

    На мой взгляд плагин нужный и удобный.

  4. Сергей:

    Спасибо огромное! За скрипт и подробную инструкцию.Оказывается всё очень просто.Поставил скрипт на один из проектов.

    Добавил Ваш сайт в закладки, буду возвращаться. Успехов!

    • Здравствуйте Сергей. Совершенно верно, все не так уж и сложно когда делаешь. Сложно тогда, когда не делаешь 🙂

  5. Тамара:

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

    • Тамара, я очень рад что у вас все получилось. Успехов вам 🙂

  6. Валентина:

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

    • Зачем вам нерабочие плагины :|? Удалите их. Спасибо за благодарность 😐 😳

  7. Татьяна:

    Спасибо! много уже видела статей, как поставить кнопку, но ваша самая лучшая. Твит.
    Уже поставила, и очень довольна, что нашла самый лучший дизайн кнопочки.
    Приглашаю в гости. А вот как смайлики поставить, где то уже находила, ставила, но они у меня не работали, есть у Вас??? сейчас поищу, если нет научите чайника! плизЗ.

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

  8. Iryna:

    Большое спасибо! Давно хотела установить кнопку «Наверх», но не хотелось ставить еще один плагин. Сейчас поставила скрипт. Все работает. У Вас очень полезные материалы на сайте. Буду заходить за полезностями :roll: Вот только, обращаться к Вам хотелось бы по имени. Но нигде не нашла его 😀 Твитнула.

  9. вале4нтина:

    здравствуйте! 😳 а клавиша «Home»не заменит смысл Вашей статьи?….

    • Здравствуйте вале4нтина. Home — это домашняя страница, а кнопка наверх, дает возможность не переходить на другую страницу, а только подняться на верх.

    • вале4нтина:

      я имела ввиду клавишу на клаве…, там home ( вверх) и end (вниз) текста, я на них нажимаю, когда нужно в начало или в конец страницы ….

    • Да, можно воспользоваться клавишей home и end, так же функцию перемещения вверх и в низ, выполняет кнопка клавиатуры page up и page down. Но как известно, сколько людей столько же и мнений. По этому, я считаю, что чем больше вариантов предложено, тем лучше, и каждый сможет выбрать удобный для себя вариант.

  10. Роза:

    Спасибо за кнопочку. Я, к слову, как у вас выбрала. Она мне под дизайн хорошо подходит. Хоть и плохо разбираюсь в кодах, но тоже стараюсь по возможности без плагинов обойтись. А здесь все просто оказалось.

  11. Макс:

    Спасибо.Все работает.С первого раза вник как и что надо делать.Решил сделать оригинально, убрал стандартные стрелки) :mrgreen:

  12. Наталья:

    Спасибо! Все очень просто и доступно! На моих длинных статьях — очень актуально!

    • Наталья, я очень рад что Вам помог. Используйте мой сайт в своих целях, возникнут вопросы, пишите в отдел «СВЯЗЬ СО МНОЙ», надеюсь я смогу вам помочь

  13. Ирина:

    Виталик, спасибо. все получилось!!!!

Оставить свое мнение: