JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="screen" id="screen1">
  1
  <a href="#screen2" class="button-down">↓↓↓down↓↓↓</a>
</div>
<div class="screen" id="screen2">
  2
  <a href="#screen3" class="button-down">↓↓↓down↓↓↓</a>
</div>
<div class="screen" id="screen3">
  3
  <a href="#screen4" class="button-down">↓↓↓down↓↓↓</a>
</div>
<div class="screen" id="screen4">
  4
  <a href="#screen5" class="button-down">↓↓↓down↓↓↓</a>
</div>
<div class="screen" id="screen5">
  5
  <a href="#screen6" class="button-down">↓↓↓down↓↓↓</a>
</div>
<div class="screen" id="screen6">
  6
</div>

SCSS

$s-min: 20;
$s-max: 70;
$l-min: 30;
$l-max: 90;

html, body {
  margin: 0;
  height: 100%;
}

@for $i from 1 through 100 {
  .screen:nth-child(#{$i}) {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10vw;
    background-color: hsl(random(360),$s-min+random($s-max+-$s-min),$l-min+random($l-max+-$l-min));
  }
}

.button-down {
  position: absolute;
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  margin-left: -70px;
  bottom: 20px;
  font-size: 20px;
  background: #fff;
  color: #000;
  &:hover {
    color: #00f;
  }
}

JavaScript

const $btns = document.querySelectorAll('.button-down');

const onAnchorClick = (e) => {
	const $screen = document.querySelector(e.target.hash);
  const screenOffset = $screen.offsetTop;
  const step = 5;
  
  const interval = setInterval(() => {
  	let _scrollY = scrollY;
  	const _diff = screenOffset - _scrollY;
    const _step = Math.abs(_diff) >= step ? step : Math.abs(_diff); 
    
  	if (_diff !== 0) {
      return scrollTo({
      	top: _diff < 0 ? _scrollY - _step : _scrollY + _step
      });
    }
    return clearInterval(interval);
  }, 4);
  
	e.preventDefault();
}

[...$btns].map(($btn) => {
	$btn.addEventListener('click', onAnchorClick);
});