Прокрутка вверх

by Artem

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odit earum quo sint officiis mollitia harum numquam atque, doloremque obcaecati. Iusto facere error veritatis accusantium ea minus, cupiditate aperiam placeat quis asperiores quasi neque debitis
  quam velit culpa, quia. Libero ad molestiae dolorem ipsum aliquam, a, architecto delectus debitis natus cumque ut maiores? Provident maiores sint, minus non sunt, dolore eligendi rem veniam. Reiciendis esse ipsa, sit sequi porro assumenda, soluta quidem,
  cumque fuga atque amet vitae adipisci asperiores aspernatur. Reiciendis aliquid, et doloremque. Neque quos culpa suscipit ab impedit voluptas dolorum, quisquam nobis odit, dolores rem, adipisci, in mollitia sapiente laboriosam excepturi. Qui deleniti
  architecto veniam dolorem temporibus adipisci voluptatem reprehenderit distinctio, ipsam, porro quidem, cumque suscipit sit a laborum provident magnam. Corporis nemo facere perferendis quasi eligendi odit officiis autem, consequuntur nesciunt sapiente
  rerum iste aperiam eveniet magni culpa, expedita esse, tenetur deleniti suscipit quis est quam soluta. Aspernatur molestias aliquid ab unde, ipsum repellat veritatis, at explicabo repellendus, sapiente laboriosam praesentium? Esse iste tempora doloribus,
  cum eos consequatur odit consequuntur neque obcaecati sed animi sint voluptates enim sunt ea, commodi autem fugit explicabo minus illo numquam est perspiciatis facilis! Est ex recusandae eos eveniet ut dignissimos nisi, natus similique facilis mollitia
  incidunt ad laudantium nam vel, aliquam. Velit, accusamus atque consequuntur, quos eveniet voluptatibus tempora sit ullam at asperiores aperiam? Temporibus dolores blanditiis quam recusandae dicta nesciunt. Excepturi labore magnam officia natus eligendi
  tempora, commodi officiis quis nihil et. Dignissimos corporis debitis maxime laudantium iure velit aut amet reprehenderit dolor tempora earum fugit, aperiam laboriosam molestias ex alias doloribus...

CSS

body {
  margin: 0;
}

div {
  color: #fff;
  font-size: 16;
  font-family: Menlo, Consolas, monospace;
  background-color: blue;
  padding: 10px 75px 10px 10px;
}

button {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 5;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 16px;
  font-family: Menlo, Consolas, monospace;
  background-color: #f2777a;
  cursor: pointer;
}

JavaScript

'use strict';
var div, btn, scrl, fr;
div = document.getElementsByTagName('div')[0];
btn = document.getElementsByTagName('button')[0];

scrl = function() {
  if (window.scrollY === 0) {
    cancelAnimationFrame(fr);
    return;
  }
  fr = requestAnimationFrame(scrl);
  window.scrollBy(0, -10);
};

btn.addEventListener('click', scrl);