Scroll

by artgas_pro

HTML

<body>
<header class="header header__top">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, consequatur aspernatur iste nam ipsa beatae, omnis debitis facilis deserunt nisi porro, ex cupiditate qui eligendi! Debitis repellat beatae sunt ad!</div>
<div>Excepturi optio quis odio, minus obcaecati nesciunt voluptas amet possimus, voluptatibus, fugiat consequatur eligendi recusandae qui quidem saepe culpa enim eveniet doloribus tenetur. Placeat distinctio repellendus veniam dicta ad rem.</div>
<div>Ratione repellendus cum nostrum. Consectetur et aut cum. Sed id, odio nemo alias maxime, dolorem iusto deleniti veritatis enim natus ut! Aliquam consequuntur harum, ad sunt in voluptates quo eaque!</div>
<div>Modi reprehenderit magnam, vel omnis officiis, tempora et eveniet dicta commodi. Quas repellat iusto aliquam? Fugiat omnis magnam, aliquam, accusantium, sapiente illum non ipsum dolore sint itaque praesentium vero placeat!</div>
<div>Debitis temporibus quam commodi consectetur officiis neque, atque, dolor voluptatibus provident repellat suscipit esse fugiat quod quibusdam totam minus molestiae illo optio cumque nostrum in quo fuga quos. Excepturi, enim.</div>
</header>

<a href="#catalog" class="ancor">Catalog</a>

<section class="some-section">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque voluptatum enim nisi dolorem inventore perspiciatis nulla, ea, accusantium explicabo omnis aspernatur sapiente eligendi. Aperiam, quam alias eum possimus voluptas ipsa.</div>
<div>Est reiciendis dolor quo ab repudiandae pariatur, in accusamus tempore placeat ex vel similique neque quae possimus debitis, ipsa laboriosam cumque velit molestiae officia, et ducimus omnis officiis sed. Rerum.</div>
<div>Nesciunt nemo ipsa consequatur sit eos vel impedit at voluptas! Corrupti eum asperiores repudiandae inventore ut porro officiis aut quo, ratione ipsa, doloribus sapiente eaque totam voluptates ea. Fugiat, neque.</div>
<div>Quaerat maiores iure...

CSS

.header, .some-section{
  padding: 30px;
}

a{
  padding-left: 30px;
}

JavaScript

const body = document.querySelector('body');

document.addEventListener('click', documentActions);

function documentActions(e) {
  const target = e.target;
  //stopScrolling
  if (!target.classList.contains('.ancor') && scrol == true) {
    body.addEventListener('click', stopAnimation);
  }
}

//scroll
let stop = false;
let scrol = false;
function stopAnimation() { stop = true; }
const scrolling = (selectorBtn) => {
  //const btnUp = document.querySelector(selectorBtn);

  const links = document.querySelectorAll(".ancor");
  let speed = 0.3;
  const headerHeight = document.querySelector('.header__top').offsetHeight;

  /*window.addEventListener("scroll", () => {
    if (document.documentElement.scrollTop > 1600) {
      btnUp.style.opacity = "1";
    } else {
      btnUp.style.opacity = "0";
    }
  });*/

  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function (event) {
      event.preventDefault();
      let widthTop = Math.round(
        document.documentElement.scrollTop || document.body.scrollTop
      ),
        hash = this.hash;
      let toBlock = document.querySelector(hash).getBoundingClientRect().top - headerHeight;
      let start = null;

      requestAnimationFrame(step);

      scrol = true;

      function step(time) {


        if (start === null) {
          start = time;
        }
        let progress = time - start,
          r =
            toBlock < 0
              ? Math.max(widthTop - progress / speed, widthTop + toBlock)
              : Math.min(widthTop + progress / speed, widthTop + toBlock);

        let element = document.documentElement || document.body;
        element.scrollTo(0, r);

        if (r != widthTop + toBlock && !stop) {
          requestAnimationFrame(step);
        } else {
          body.removeEventListener('click', stopAnimation);
          stop = false;
          scrol = false
          // location.hash = hash;
        }
      }
    });
  }
};

scrolling(/*".pageup"*/);