Кнопка наверх для сайта с помощью скрипта
Кнопка наверх для сайта с помощью скрипта. Разговор пойдет сегодня, как и всегда об улучшении блога, ну или сайта, как вам угодно. Но суть не в этом. Суть сегодняшней статьи состоит в том, что бы как можно подробнее донести до вас информацию что и как вам нужно сделать, что бы, и на вашем сайте появилась кнопка наверх.
Но для начала, что бы все-таки остановится на этом варианте, который предлагаю вам я и избежать разногласий, скажу о том, о чем говорил не раз в предыдущих статьях, а именно, о плагинах.
Существует множество различных плагинов для сайта на движке 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: Возникнут сложности обращайтесь в раздел «связь со мной»
«Хочешь быстро стартовать в Интернете?»
Конечно если страница длинная то данная кнопка может и нужна .И все-же когда человек сам вертит страницу то он может наткнуться еще на что-нибуть интересное и задержится а так фьють на верх и ушел со страницы,но это мое мнение.
Здравствуйте Сергей. Кнопка на верх для сайта, дает вам право выбора. К примеру: если в пятиэтажном доме есть лифт, вас же никто не заставляет подниматься именно им, можно же и пешком пройтись. 🙂
спасибо за интересные и полезные статьи! 😉
Всегда пожалуйста Наталия. 🙂
На мой взгляд плагин нужный и удобный.
Спасибо огромное! За скрипт и подробную инструкцию.Оказывается всё очень просто.Поставил скрипт на один из проектов.
Добавил Ваш сайт в закладки, буду возвращаться. Успехов!
Здравствуйте Сергей. Совершенно верно, все не так уж и сложно когда делаешь. Сложно тогда, когда не делаешь 🙂
Спасибо огромное Вам . На один свой блог поставила кнопку наверх. Теперь буду ждать новых полезных статей, так как подписалась на новые статьи Вашего блога. Хорошо, когда есть такие молодые и умные ребята, у которых можно поучиться.
Тамара, я очень рад что у вас все получилось. Успехов вам 🙂
здравствуйте спасибо за кнопочку. а то у меня плагины не работают,подскажите их нужно удалить что бы не занимали место.И ещё хочу поблагодарить за исправление странички 404.
Зачем вам нерабочие плагины :|? Удалите их. Спасибо за благодарность 😐 😳
Спасибо! много уже видела статей, как поставить кнопку, но ваша самая лучшая. Твит.
Уже поставила, и очень довольна, что нашла самый лучший дизайн кнопочки.
Приглашаю в гости. А вот как смайлики поставить, где то уже находила, ставила, но они у меня не работали, есть у Вас??? сейчас поищу, если нет научите чайника! плизЗ.
Татьяна, спасибо вам за такой замечательный отзыв :!:, я рад что у вас все получилось. Обязательно посмотрю ваш сайт.
Большое спасибо! Давно хотела установить кнопку «Наверх», но не хотелось ставить еще один плагин. Сейчас поставила скрипт. Все работает. У Вас очень полезные материалы на сайте. Буду заходить за полезностями 🙄 Вот только, обращаться к Вам хотелось бы по имени. Но нигде не нашла его 😀 Твитнула.
Пожалуйста Iryna. Зовут меня Виталик 😉
здравствуйте! 😳 а клавиша «Home»не заменит смысл Вашей статьи?….
Здравствуйте вале4нтина. Home — это домашняя страница, а кнопка наверх, дает возможность не переходить на другую страницу, а только подняться на верх.
я имела ввиду клавишу на клаве…, там home ( вверх) и end (вниз) текста, я на них нажимаю, когда нужно в начало или в конец страницы ….
Да, можно воспользоваться клавишей home и end, так же функцию перемещения вверх и в низ, выполняет кнопка клавиатуры page up и page down. Но как известно, сколько людей столько же и мнений. По этому, я считаю, что чем больше вариантов предложено, тем лучше, и каждый сможет выбрать удобный для себя вариант.
Спасибо за кнопочку. Я, к слову, как у вас выбрала. Она мне под дизайн хорошо подходит. Хоть и плохо разбираюсь в кодах, но тоже стараюсь по возможности без плагинов обойтись. А здесь все просто оказалось.
Спасибо.Все работает.С первого раза вник как и что надо делать.Решил сделать оригинально, убрал стандартные стрелки)
Спасибо! Все очень просто и доступно! На моих длинных статьях — очень актуально!
Наталья, я очень рад что Вам помог. Используйте мой сайт в своих целях, возникнут вопросы, пишите в отдел «СВЯЗЬ СО МНОЙ», надеюсь я смогу вам помочь
Виталик, спасибо. все получилось!!!!
Пожалуйста Ирина, я рад что у вас получилось 😉