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

Кнопка Вверх для сайта

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

И так, наша цель:

Создать и добавить на сайт кнопку «Вверх», которая бы по умолчанию была скрыта и появлялась только по мере прокрутки страницы вниз. При нажатии на нее, страница плавно возвращалась бы к своему началу.

Для достижения озвученной цели нам потребуется сделать всего 4 небольших шага.

Шаг №1. Подключение библиотеки JQuery.

Кнопка должна быть по умолчанию скрыта и появляться только по мере прокрутки страницы вниз, кроме того, страница должна возвращаться к своему началу не резко в одно мгновение, а плавно. Эти два эффекта несложно реализовать с помощью библиотеки JQuery.

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

1. Перед закрывающим тегом body разместите следующий код:

<script language="JavaScript" type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

Обратите внимание на версию JQuery. На момент написания данной статью последней была версия 1.8.3. Вы можете указать более свежую версию библиотеки.

При таком подключении библиотека JQuery будет подгружаться со стороннего источника. Один минус данного метода — если этот сторонний источник не будет доступен, наша кнопка перестанет работать так, как мы того хотим.

2. Скачайте файл jquery.min.js с официального сайта.

download jquery

Загрузите его на сервер с помощью ftp клиента и подключите к сайту с помощью следующего кода (опять же, добавляем его перед закрывающим тегом body).

<script language="JavaScript" type="text/javascript"
src="http://vash_sayt.ru/jquery.min.js">
</script>

Не забываем прописать адрес своего сайта.

Шаг №2. Добавление скрипта.

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

<script language="JavaScript" type="text/javascript">
$(function() {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});
 
$(function() {
 $("#Go_Top").scrollToTop();
});
</script>

Данный скрипт отвечает за скрытие/отображение кнопки «Вверх» на сайте и за плавную прокрутку страницы к началу. В нем используются функции из библиотеки JQuery, поэтому если ее не подключить, скрипт работать не будет.

Шаг №3. Загрузка картинки на сервер.

В качестве кнопки Вверх я использую картинку, ибо это смотрится гораздо красивее, чем просто слово. В этом случае следует найти подходящее изображение размером примерно 50×50 px с прозрачным фоном и загрузить на сервер. Можно просто в корневой каталог закинуть, а можно в папку с остальными картинками (images). Главное, запомнить название картинки и путь до нее.

Например, картинка up.png загружена в папку /images. Ее адрес будет: http://vash_sayt.ru/images/up.png. Только впишите название своего домена.

Шаг №4. Вывод кнопки на сайт.

Теперь необходимо вывести картинку на сайт и привязать к ней ссылку, которая бы перекидывала пользователя к началу страницы. Это сделать нетрудно. Берете следующий код:

<a href="#" id='Go_Top'><img alt="up" src="http://vash_sayt.ru/images/up.png"></a>

Подменяете в нем адрес картинки на свой и вставляете в html код страницы между скриптом из шага №2 и закрывающим тегом body.

Что в итоге получается: в исходный код страниц сайта, пред закрывающим тегом body, друг за другом следует вставить три блока кода, отвечающих за:

  1. подключение библиотеки JQuery;
  2. скрипт прокрутки и отображения кнопки;
  3. вывод картинки и привязку ссылку.

Шаг №5. Добавляем стили.

Принято, что кнопка Вверх располагается в правом нижнем углу страницы. Этого добиться можно с помощью стилей. Откройте в редакторе Notepad++ файл style.css с используемыми стилями и добавьте в самый конец следующие строчки:

/* Стили привязываем к элементу с id='Go_Top' */
#Go_Top {
    position: fixed; /* Задается фиксированное положение */   
    bottom: 60px; /* Отступ снизу */
    right: 10px; /* Отступ справа */
    cursor: pointer; /* Задает вид курсора мыши в виде руки */
}

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

Пожалуй, это все, что я хотел рассказать вам сегодня. Спасибо за внимание! Берегите себя.

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.