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

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

В HTML файле создадим div, который будет представлять из себя кнопку для возврата на top.

<div class="scrollup"> Наверх </div>

В CSS файле спозиционируем кнопку (например, справа снизу) и скроем её. В дальнейшем с помощью javascript сделаем чтобы она появлялась.

.to-up {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: none;
  z-index: 22;
  cursor: pointer;
}

Так же добавили z-index - определяет порядок слоёв по оси Z и cursor: pointer - чтобы появлялась рука при наведении (т.к. у нас вместо ссылки div). Другие стили по желанию и воображению.

JavaScript: на расстоянии 997px показываем блок с помощью функции ''fadeIn'', а на расстоянии меньше 997px скрываем при помощи ''fadeOut''. Так же задаём скорость перехода Наверх в миллисекундах (например, 888).

$(function() {
  $(window).scroll(function(){
    if ($(this).scrollTop() > 997) {
    $('.to-up').fadeIn();
    } else {
    $('.to-up').fadeOut();
    }
    });
    $('.to-up').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 888);
    return false;
    });
});

Получившийся результат

See the Pen Up button by Nikolay (@Only-to-top) on CodePen.