JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a"></div>
<div class="myDiv"></div>
<div class="b"></div>

CSS

.a { float:left; width:100%; height:1000px; background-color:#999; }
.myDiv { float:left; width:100px; height:100px; background-color:#000; }
.b { float:left; width:100%; height:1000px; background-color:#ccc; }

JavaScript

var aHeight = $('.a').height();



$('.myDiv').click(function(){
    disable_scroll();
    $('html, body').stop().animate({ scrollTop: aHeight }, 700,function() {
       enable_scroll();
    });
    
});

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [37, 38, 39, 40];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', wheel, false);
  }
  window.onmousewheel = document.onmousewheel = wheel;
  document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
}