Кнопка наверх для сайта. Приветствую вас на сайте vi-internet.ru. Разговор пойдет сегодня, как и всегда об улучшении блога, ну или сайта, как вам угодно. Но суть не в этом. Суть сегодняшней статьи состоит в том, что бы как можно подробнее донести до вас информацию об установке этой, кнопки вверх.
Но для начала, что бы все-таки остановится на этом варианте, который предлагаю вам я и избежать разногласий, скажу о том, о чем говорил не раз в предыдущих статьях, а именно, о плагинах.
Существует множество различных плагинов для сайта на движке wordpress, да они улучшают его роботу, но не забывайте и тот факт, что они и тормозят скорость загрузки сайта, а это не есть хорошо. Если все-таки хотите воспользоваться плагином, для установки на сайт кнопки вверх, вам поможет плагин Scroll to Top. А я расскажу вам, как устанавливается кнопка наверх с помощью скрипта, который сможет установить любой владелец своего сайта за 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 (подвал), и в конце этого шаблона после закрывающего тега , вставьте скопированный скрипт, и сохраните изменения. Все, «кнопка наверх для сайта» установлена. Теперь чтобы попасть наверх сайта, не нужно 100 раз крутить скролом, а достаточно просто нажать на стрелку.
(Перед изменением, какого либо кода на сайте, его желательно скопировать и сохранить в блокнот, во избежание ошибок!)
скрипт для вставки
var smoothJumpUp = function() {
if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
window.scrollBy(0,-50);
setTimeout(smoothJumpUp, 20);
}
}
Вот как вставил скрипт кнопки наверх я. Может это кому поможет.
На этом все, спасибо за ваше внимание, делиться статей с друзьями не обязательно. Кто использовал скрипт, просьба отписаться в комментариях, что бы я знал полезность этой статьи, и работает ли кнопка вверх на вашем сайте. До встречи в следующей статье.
P.S: Возникнут сложности обращайтесь в раздел «связь со мной»