Кнопка наверх | Vi-Internet.ru

Tweet

knopka-naverh-4625012

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

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

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

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

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

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

 left

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

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

vi1-2001998  https://sites.google.com/site/poleznoznat/r1.png

vi2-6396619 https://sites.google.com/site/poleznoznat/r2.png

vi3-1461046 https://sites.google.com/site/poleznoznat/r3.png

vi4-7379080 https://sites.google.com/site/poleznoznat/r5.png

vi5-9262303 https://sites.google.com/site/poleznoznat/r6.png

vi6-6465147 https://sites.google.com/site/poleznoznat/r7.png

vi7-5734542 https://sites.google.com/site/poleznoznat/r8.png

vi8-4466379 https://sites.google.com/site/poleznoznat/r9.png

vi9-5661220 https://sites.google.com/site/poleznoznat/r10.png

vi10-1558107 https://sites.google.com/site/poleznoznat/r11.png

vi11-5364290 https://sites.google.com/site/poleznoznat/r12.png

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

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

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

var smoothJumpUp = function() {

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

window.scrollBy(0,-50);

setTimeout(smoothJumpUp, 20);

}

}

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

knopka-naverh-1024x495-5380092

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

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

Запись опубликована в рубрике Без рубрики. Добавьте в закладки постоянную ссылку.