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

Создать кнопку "наверх" для сайта не представляет особых усилий.

Давайте же создадим её на языках html,css и jquery.

Html нужен для разметки, css - для оформления.

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

Создание кнопки наверх

1. Добавим между тегами "body" разметку нашей кнопки.

<a href="#" id="toTop">Наверх</a>

Вместо текста, можно вставить картинку или блок.

2. Добавим немного оформления на CSS.

#toTop{
  background-color: #aaca3c;
  padding: 5px;
  cursor: pointer;
  z-index: 9999;
  bottom: 10px;
  right: 10px;
  position: fixed;
}

3. Подключим библиотеку Jquery перед закрывающем тегом body(Если её нет).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4. Теперь вставим наш скрипт на jquery после подключения библиотеки jquery.

$(function () {
    $.fn.scrollToTop = function () {
        $(this).hide().removeAttr("href");

        if ($(window).scrollTop() != "0") {
            $(this).fadeIn("slow")
        }

        var scrollDiv = $(this);
        $(window).scroll(function () {
            if ($(window).scrollTop() == "0") {
                $(scrollDiv).fadeOut("slow")
            } else {
                $(scrollDiv).fadeIn("slow")
            }
        });
        $(this).click(function () {
            $("html, body").animate({scrollTop: 0}, "slow")
        })
    }
});
// Вызов
$(function () {
    $("#toTop").scrollToTop();
}); 

Здесь две функции, в первой мы прописываем все эффекты, во второй мы вызываем эту функцию для определённого объекта, в нашем случае это #toTop.

Вот так просто мы и создали кнопку "наверх".