Кнопка для сайта «Вверх» с плавным скроллингом

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

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

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

Шаг 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>
Шаг 2. Добавление скрипта.

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

<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>

Этот скрипт отвечает за плавное появление и скрытие кнопки. И за то что бы страница плавно поднималась вверх. Если этот скрипт не подключить, кнопка работать не будет.

Шаг 3. Загрузка картинки на хостинг.

В качестве кнопки «Вверх» лучше использовать картинку, так как по моему мнению это красивее чем просто текст. Для этого нам нужно изображение примерно 50×50 пикселей и с форматом .png.
Напрмер картинка verx.png будет загружена в папку /images, значит путь к файлу будет выглядеть так — http://sait.ru/images/verx.png — обязательно впишите название своего домена.

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

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

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

Поменяйте в нем адрес картинки на свой, и вставляйте между скриптом из шага номер 2 и тегом </body>.

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

Обычно кнопка бывает в правом нижнем углу, что бы она была там, или переместить ее в другое место, для этого нужно добавить стили. Откройте свой файл style.css с помощью блокнота и пропишите код который ниже. Добавьте его в самый конец.

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

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

Вот в общем то и все, кнопка должна работать. Удачи!