Кнопка вверх на сайте-установка

Чтобы читатель сайта, дочитав до конца статью, не возвращался вверх к меню сайта мучая свою мышку, советуем установить на своем сайте кнопку «Вверх». Кнопка вверх автоматически прокручивает web-страницу и улучшает навигацию по ресурсу. В этой статье мы расскажем о 3 способах её установки на сайте. Опишем, как сделать обычную прокрутку веб-страницы только через CSS и HTML. А это является хорошим решением, чтобы создать плавный скроллинг страницы с помощью jQuery.

1. Прокрутка web-страницы и кнопка вверх через CSS и HTML

Не стоит пугаться, увидев символы HTML и CSS, устанавливается такая кнопка вверх посредством так называемого «якоря». В верхней части страницы, в HTML-коде сразу после тега, или в блоке меню, в том месте, до которого вам нужно, чтобы прокручивалась страница, необходимо установить код. В этом коде id – это идентификатор ссылки. Далее нужно будет прописать саму ссылку-кнопку, нажимая на которую, происходит прокрутка веб-страницы к «брошенному якорю». Ее HTML-код можно будет расположить где вам удобно, потому что расположение самой кнопки будет задано в CSS.

Для того, чтобы придать нормальный вид кнопке, нужно добавить CSS-код. Единственным её недостатком, является то, что она будет видна и в верхней части вашей страницы. А основной ее плюс в том, что на такую кнопку не влияет, включена в браузере поддержка JavaScript или нет. Кроме всего прочего, эта кнопка вверх не требует установки никаких плагинов или скриптов на ваш сайт и не съедает скорость и время загрузки страниц.

2. Прокрутка страницы с использованием скрипта jQuery

Рассмотрим второй вариант, как устанавливается кнопка «вверх» на сайте. Второй способ от предыдущего примера HTML не сильно отличается. Но его преимущество заключается в том, что он упростит пару вещей в создании быстрого скроллинга, сделает прокрутку более плавной и избавит вас от размещения якоря. Для этого проделываем следующее;

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

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

3. Плагин jQuery для прокрутки web-страницы вверх

Наилучшим и самым жизнеспособным способом как установить кнопку «вверх» на сайте является плагин jQuery небольшой скрипт. Он был запущен в далеком 2009 году Craig Wilson, Ph. Creative и до настоящего времени пользуется большой популярностью. Если данный скрипт рассматривать подробно, то и плагином его назвать нельзя, а связано это с его небольшим размером. Хотя он и мал, но обладает всеми необходимыми функциями, а именно:

Очень плавно прокручивает страницу вверх.
Вверху страницы кнопку прокрутки не видно, появляется она, когда страница уже примерно наполовину прочитана или просмотрена и исчезает она после того, как вы вернулись наверх.
Обладает маленьким размером и совместим абсолютно со всеми браузерами.

Чтобы установить кнопку «вверх» на блоге в третьем варианте, нужно поместить HTML-код
в любом месте вашего шаблона. К примеру, в Blogger его можно разместить в гаджете HTML/JavaScript. Далее необходимо добавить CSS. А сам плагин jQuery, необходимо разместить перед закрывающимся тегом.

Если вы решили установить на своем сайте красивые плавающие кнопки социальных сетей от сервиса Share42, то советую в пакет выбранных кнопок включить и кнопку «вверх», которая в нем присутствует. Но почему-то ее либо не замечают или игнорируют.

Post Views: 51