JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="box">
  <a data-scroll="#anchor">scroll down</a>
</div>
<div class="box" id="anchor">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos quasi, voluptatibus. Laudantium accusantium sapiente tenetur vitae ex obcaecati facilis? Provident facilis facere nisi temporibus. Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos quasi, voluptatibus. Laudantium accusantium sapiente tenetur vitae ex obcaecati facilis? Provident facilis facere nisi temporibus.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos quasi, voluptatibus. Laudantium accusantium sapiente tenetur vitae ex obcaecati facilis? Provident facilis facere nisi temporibus.Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos quasi, voluptatibus. Laudantium accusantium sapiente tenetur vitae ex obcaecati facilis? Provident facilis facere nisi temporibus.Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos quasi, voluptatibus. Laudantium accusantium sapiente tenetur vitae ex obcaecati facilis? Provident facilis facere nati facilis? Provident facilis facere nisi
    temporibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos quasi, voluptatibus. Laudantium accusantium sapiente tenetur vitae ex obcaecati facilis? Provident facilis facere nisi temporibus.Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos quasi, voluptatibus. Laudantium accusantium sapiente tenetur vitae ex obcaecati facilis? Provident facilis facere nisi temporibus.Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Iure sit, magnam molestiae consectetur unde dignissimos...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  min-height: 75vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10%;
}

.box:nth-child(even) {
  background: #ccc;
}

a {
  cursor: pointer;
  display: block;
  padding: 10px 30px;
  line-height: 20px;
  background: #eee;
  text-transform: uppercase;
  font-weight: bold;
  font-family: sans-serif;
  letter-spacing: 2px;
  font-size: 12px;
  align-self: flex-end;
}

p {
  font-size: 15px;
  line-height: 4;
  filter: blur(2px);
}

JavaScript

var scroll = new SmoothScroll(document, 50, 12);

function SmoothScroll(target, speed, smooth) {

// scroll to anchor
    $(document).on('click', 'a[data-scroll^="#"]', function(e) {
      if ($(this).attr('data-scroll') !== "") {
        e.preventDefault();
        var hash = $(this).attr('data-scroll');
        $('html, body').animate({
          scrollTop: $(hash).offset().top,
        }, 600, 'swing', function() { pos = target.scrollTop });
      }
    });


  if (target === document)
    target = (document.scrollingElement || document.documentElement || document.body.parentNode || document.body)

  // cross browser support for document scrolling
  var moving = false
  var pos = target.scrollTop
  var frame = target === document.body && document.documentElement ? document.documentElement : target // safari is the new IE

  target.addEventListener('mousewheel', 		scrolled, { passive: false })
  target.addEventListener('DOMMouseScroll', scrolled, { passive: false  })
  target.addEventListener('scroll',			 		scrolled, { passive: false })

  function scrolled(e) {
    e.preventDefault(); // disable default scrolling

    var delta = normalizeWheelDelta(e)

    pos += -delta * speed
    pos = Math.max(0, Math.min(pos, target.scrollHeight - frame.clientHeight)) // limit scrolling

    if (!moving)
      update()
  }

  function normalizeWheelDelta(e) {
    if (e.detail) {
      if (e.wheelDelta)
        return e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1) // Opera else
      return -e.detail / 3 // Firefox
    } else
      return e.wheelDelta / 120 // IE,Safari,Chrome
  }

  function update() {
    moving = true

    var delta = (pos - target.scrollTop) / smooth
    target.scrollTop += delta

    if (Math.abs(delta) > 0.5)
      requestFrame(update)
    else
      moving = false
  }

  var requestFrame = function() { // requestAnimationFrame cross browser
    return (window.requestAnimationFrame || window.webkitRequestAnimationFrame ||...