1000 подписчиков за 1 месяц!

Скачать план

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

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

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

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

Существует множество различных плагинов для сайта на движке 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-почту

* Конфиденциальность гарантирована.