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

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

Скачать рабочий пример

1. Подключите JQuery к сайту, и добавьте также следующий сценарий на JavaScript:

$(document).ready(function() {

  /*** Кнопка Наверх ***/
  
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $('#to-top').fadeIn();
    } else {
      $("#to-top").hide();
    }
  });

  $('#to-top').click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 599);

    return false;
  });
  
});

2. К стилям допишите следующие строчки:

#to-top {
  display: none;
  cursor: pointer;
  position: fixed;
  z-index: 1;
  bottom: 20px;
  right: 20px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  background: #e51d22 url(../img/to-top.png) 0 0 no-repeat;
}

3. Перед тегом </body> добавьте:

<div id="to-top"></div>

Все. Кнопка плавной прокрутки наверх готова.